如何回到顶部

Published on:

回到顶部的小功能 我只是搬运工

参考了学长们的JDstore,我能迁移过来什么功能呢?

这个回到顶部的小按钮好像不错的样子,拿来学一下吧。

如何实现回到顶部

原始的功能只需三步

1.在 app/views/common/_footer.hrml.erb 中加入

<div id="gotop">回到<br/>顶部</div>

2.在 app/assets/stylesheets/application.scss 中加入如下代码:

//回到顶部
#gotop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: rgb(25,187,49);//
  color: #ffffff;
  border-radius: 50%;
  padding: 5px 9px;
  cursor: pointer;
}

3.在 app/assets/javascripts/application.js 中加入如下代码:

$(document).on('click', '#gotop', function () {
  $('body').animate({'scrollTop': 0}, 500) //在500ms的时间内,慢慢地回到顶部
})

然后你会会得到一个这样子的色块:

如果觉得难看的话,请自行修改 scss 中的属性

进阶版

你有没有发现,最开始的时候,我们已经在顶部了,实际上是不需要这个功能的,(主要是由于太难看了......)我们应该把ta隐藏起来,离开顶部向下浏览的时候,再让ta出现,实现功能,回到顶部的时候,ta再隐藏起来。

这一个功能只需要在上一步的基础上改增加两个地方:

1.把 app/assets/stylesheets/application.scss 改成这个样子

//回到顶部
#gotop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: rgb(25,187,49);//
  color: #ffffff;
  border-radius: 50%;
  padding: 5px 9px;
  cursor: pointer;
  
  display: none; /*默认先隐藏掉*/
}

2.把 app/assets/javascripts/application.js 改成这个样子

//顶部回到
$(document).on('click', '#gotop', function () {
  $('body').animate({'scrollTop': 0}, 500) //在500ms的时间内,慢慢地回到顶部
})

 $(window).scroll(function () {
   if ($(this).scrollTop() > 560) {
     $('#gotop').fadeIn() // 当页面向下滚动的距离大于500px时,慢慢地显示「回到顶部按钮」
   } else {
     $('#gotop').fadeOut() // 否则慢慢地隐藏「回到顶部按钮」
   }
 })

html中的东西不动。

这样子就能实现一开始不显示,到一定距离的时才慢慢显示出来,回到顶部的时候ta有消失。

效果图

怎么样,很简单吧。

参考(抄袭)
1.https://forum.qzy.camp/t/4-jquery/741

Comments

comments powered by Disqus