网页回到顶部的js代码实现

背景

还是给老板写他的个人主页，用到了一个小功能，随手记录下

代码

控制样式的 css 代码如下

/* 回到顶部实现代码的css */
.back-to-top {display: none;/* 默认是隐藏的，这样在第一屏才不显示 */position: fixed;/* 位置是固定的 */bottom:300px;/* 显示在页面底部 */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;}

js 代码和按钮代码如下

<button class="js-back-to-top back-to-top" title="回到头部">︽</button>
<!-- 回到头部实现代码 -->
<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>