【JA魔改秘笈】利用Javascript快速实现回到页面顶端功能

本篇文章将介绍如何用Javascript快速实现回到页面顶端(Go to top)功能


让我们开始吧!

Part 1 - 在页面中加入回到顶端按钮

app/views/welcome/index.html.erb
  <div class="goTop">
    <span class="fa fa-chevron-up"></span>
  </div>

记得要帮div设定ID,之后Javascript调用时会用到

Part 2 - 在CSS设定按钮属性

app/assets/stylesheets/application.scss
.goTop {
    height: 35px;
    width: 35px;
    top: 80%;
    right: 35px;
    position: fixed;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #666;

    span {
      color: #000;
      font-size: 20px;
            position: absolute;
      top: 7px;
      left: 8px;
    }
  }

  .goTop:hover {
    background-color: #f0f0f0;

    span{
      color: #eb5424;
    }
  }

.goTop:hover指的是当鼠标移至按钮时,按钮所产生的CSS变化

❖ 以上CSS只是我网站中按钮的属性,可自行修改 ❖

Part 3 - 在Javascript设定按钮的触发行为

app/assets/javascripts/application.js
$(window).scroll(function () {
  if ($(this).scrollTop() > 2500) {
    $(".goTop").fadeIn(100);
  } else {
    $(".goTop").fadeOut(200);
  }

    $(".goTop").click(
    function() {
      $('html,body').scrollTop(0);
    });
})

$(window).scroll(function () {})指的是当屏幕滚动时,所触发的功能
if ($(this).scrollTop() > 2500)指的是当屏幕滚动到2500px的高度时,所触发的行为(因为我只设定在首页触发按钮,并且希望使用者将内容看完时才触发行为,所以数值较大)
$(".goTop").fadeIn(100)指的是按钮淡入显示的时间,100为0.1秒
$(".goTop").fadeOut(200)指的是按钮淡出显示的时间,200为0.2秒
$(".goTop").click 指的是当点击按钮时,所触发的动作
$('html,body').animate({scrollTop: 0}, 700) 指的是将屏幕上移至高度为0的地方,700为上移速度

❖ 因此这段Javascript的意思就是,当屏幕向下滚动至2500px的高度时,将以0.1秒的速度淡入显示按钮;点击按钮后,将缓慢地将屏幕上移至高度为0的地方,并同时将按钮以0.2秒的速度淡出显示。 ❖

大功告成!!


实现这功能是不是很简单呢?大家可依造自己的需求调整速度及显示的位置。

如果有任何疑问可以在下方将问题留言哦 :D

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus