很多前台展示页面,都有一个返回顶部功能,实际上这个实现起来非常简单。
document.documentElement.scrollTop=0
这个用纯JavaScript实现,动画不太方便实现,效果比较生硬,但使用JQuery或是其它动画库就十分轻松了,这里以Jquery作为例子。
$("body,html").animate({
scrollTop: 0
}, 800);
上面代码中,我们使用JQuery设置一个scrollTop
该变的动画即可实现返回顶部。
因为这个功能经常使用,我们可以把它封装成JQuery组件使用。
backtop.js
(function ($) {
$.fn.showBacktop = function () {
var backtop = $('<div title="返回顶部" class="backtop-btn"><i class="fas fa-rocket"></i></div>');
backtop.click(function () {
$("html, body").animate({ scrollTop: 0 }, 100);
});
$('body').append(backtop);
}
}(jQuery));
backtop.css
.backtop-btn {
color: rgba(125, 125, 125, 0.6);
border-radius: 999px;
width: 5rem;
height: 5rem;
position: fixed;
bottom: 0.5rem;
right: 0.5rem;
text-align: center;
font-size: 3rem;
transform: rotate(-45deg);
transition: color 0.5s;
}
.backtop-btn:hover {
color: rgba(125, 125, 125, 1);
}
使用该组件:
$.fn.showBacktop();