实现回到顶部按钮 Back To Top的效果图

回到顶部按钮，常用与PC站点中。

例如用户查看完长篇文章，可以点击按钮快速回到顶部，连续浏览其他的内容。

html悬浮返回顶部代码实现回到顶部按钮 Back To Top 的两种方法 Webpack

供应回到顶部按钮的功能，是一种很好的用户体验。

第一种方法是利用空锚点

<a href=\公众#\"大众 class=\"大众back-to-top\"大众>︽</a>

优点是实现大略非常直接，通过HTML就可实现，无需用到Javascript。

缺陷是点击就立即返回是回到顶部，比较单调，短缺动画效果。

还有一个潜在缺陷是回到头部后，URL上的锚点会变成空，如果网站用到锚点功能，例如tab标签，就会相互影响。

第二种方法是利用jQuery的滚动事宜和动画效果

<button class=\公众js-back-to-top back-to-top\"大众>︽</button>

紧张的做法有两步

当用户滚动到离顶部100像素时，展示回到顶部按钮

当用户点击按钮时，通过动画效果返转头部

实现回到顶部按钮 Back To Top的Javascript代码

这种方法的优点是逻辑大略，一览无余，回到顶部能够自定义动画效果，让用户觉得操作顺畅。

要说缺陷便是比第一种繁芜点，须要Javascript合营。

末了附上第二种方法的HTML + CSS + Javascript源码，大家可以复制后保存为html文件，双击打开即可体验。

大家如果有更好的办法，或者优化的地方，也可以和

<html>

<head>

<meta charset=\公众utf-8\"大众>

<style>

.back-to-top {

display: none; / 默认是隐蔽的，这样在第一屏才不显示 /

position: fixed; / 位置是固定的 /

bottom: 20px; / 显示在页面底部 /

right: 30px; / 显示在页面的右边 /

z-index: 99; / 确保不被其他功能覆盖 /

border: 1px solid #5cb85c; / 显示边框 /

outline: none; / 不显示外框 /

background-color: #fff; / 设置背景背景颜色 /

color: #5cb85c; / 设置文本质彩 /

cursor: pointer; / 鼠标移到按钮上显示手型 /

padding: 10px 15px 15px 15px; / 增加一些内边距 /

border-radius: 10px; / 增加圆角 /

}

.back-to-top:hover {

background-color: #5cb85c; / 鼠标移上去时，反转颜色 /

color: #fff;

}

</style>

</head>

<body>

<div style=\公众background-color:#5cb85c;color:white;padding:20px\"大众>固定到底部</div>

<div style=\"大众background-color:#f6f6f6;padding:20px 20px 1000px\公众>

该实例演示了如何创建一个“回到顶部”按钮。
请往下滚动，体验效果。
</div>

<button class=\"大众js-back-to-top back-to-top\"大众 title=\"大众回到头部\公众>&#65085;</button>

<script src=\"大众https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js\公众></script>

<script>

$(function () {

var $win = $(window);

var $backToTop = $('.js-back-to-top');

// 当用户滚动到离顶部100像素时，展示回到顶部按钮

$win.scroll(function () {

if ($win.scrollTop() > 100) {

$backToTop.show();

} else {

$backToTop.hide();

}

});

// 当用户点击按钮时，通过动画效果返转头部

$backToTop.click(function () {

$('html, body').animate({scrollTop: 0}, 200);

});

});

</script>

</body>

</html>

最末了是蜜蜂小提示韶光，让您理解更多。

蜜蜂小提示

Javascript操作的类名，利用“js-”开头，可以和CSS类区分开来，使逻辑更清晰，修正时也不用担心改错了。