建站经验技巧动态返回网页顶部按钮最简单的实现方法

动态返回网页顶部按钮最简单的实现方法

在较长的网页上加一个快速返回顶部的按钮是较好的用户体验,但如果点击按钮直接回到顶部则有些生硬了,所以多数网站都采用平滑滚动到顶部的方式,该效果实现的方法有很多,本文分享的是较简单的一种方法,其html部分代码是:

<div id="go-top"></div>

放到网页任意位置都可以,下面通过CSS将这个空白div设置为一个位于网页右下角的“按钮”:

<style type="text/css">
#go-top {
 width:40px;height:36px;
 background-color:#777;
 position:relative;
 border-radius:2px;
 position:fixed;right:5px;bottom:25px;
 cursor:pointer;display:none;
}
#go-top:after {
 content:" ";
 position:absolute;left:13px;top:12px;
 border-top:4px solid #fff;border-right:4px solid #fff;
 width:12px;height:12px;
 transform:rotate(-45deg);
}
#go-top:hover {
 background-color:#333;
}
</style>

这里设置了隐藏属性,默认情况下不显示返回顶部按钮,我们希望网页高度超过指定值的时候再显示,所以可以这样实现:

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
  var top=$("#go-top");
  $(window).scroll(function () {
    ($(window).scrollTop() > 300) ? top.show(300) : top.hide(200);
    $("#go-top").click(function () {
      $('body,html').animate({scrollTop:0});
      return false();
    })
  });
});
</script>

这样一来,当网页超过一定高度的时候则会出现返回按钮,点击后网页就会平滑滚动到顶部了。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/website/159.html