jQuery实现一个优雅的返回顶部

前言

最近在完成Freewind主题的V1.1版本的小升级，加了返回顶部的功能，索性就把实现整理成一篇博文发布出来供大家学习，效果如下：

主要功能

• 在鼠标滚动超过一半屏幕高度时显示回顶部按钮，其它情况隐藏
• 点击按钮回不是立刻回到顶部，有一个滚动的动画

设计思路

• 设计出按钮位置和样式，并且将按钮不置为透明
• 在鼠标发生滚动事件时做判断，如果滚动位置大于屏幕高度的一半，则显示回顶部按钮
• 为按钮添加点击事件，点击时使用jQuery的动画组件做一个回顶部的动画

代码实现

第三方库

• jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

• font-awesome

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

按钮设计

我自己是写了个按钮组，有个QQ联系和回顶部，正常情况只显示QQ联系

• html代码

<div id="bottom-btn-list">
    <a id="top-btn" href="javascript:void (0);"><i class="fa fa-arrow-up"></i></a>
    <a class="qq-btn"
       href="http://wpa.qq.com/msgrd?v=3&amp;uin=qq号&amp;site=qq&amp;menu=yes"
       target="_blank"><i class="fa fa-qq"></i></a>
</div>

• 对应css样式

#bottom-btn-list {
    position: fixed;
    width: 40px;
    bottom: 50px;
    right: 10px;
}

#bottom-btn-list #top-btn {
    opacity: 0;
}

#bottom-btn-list a {
    margin-top: 5px;
    background-color: rgba(0, 0, 0, .3);
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    font-size: 20px;
}

滚动判断是否显示按钮

$(window).scroll(function () {
  //滚动高度
  let scTop = $(window).scrollTop()
  //屏幕高度
  let height = $(window).height()
  if (scTop >= height * 0.5) {
    //利用jquery动画组件显示
    $("#top-btn").stop().animate({'opacity': '1'}, 500)
  } else {
    $("#top-btn").stop().animate({'opacity': '0'}, 500)
  }
})

按钮点击事件

$("#top-btn").on('click', function () {
  $('body,html').stop().animate({
    scrollTop: 0
  })
})

结束

是不是很简单呢！感谢您的阅读