前言:现在很多网站都流行使用瀑布流布局,细心的朋友会发现这种网站都有一个回到顶部的功能,对于瀑布流布局的网站来讲,这可以说是非常便捷的一个功能,因为网站下拉了很长之后,需要返回顶部的时候,只需要一点就可以回到顶部,省去了大家拖着滚动条去拉,毕竟文章内容多了,拉滚动条也很麻烦,相信大家都体验过。
下面就以吃饭用大碗的程序猿网站为例,给大家分享一个不用插件就可以实现的回到顶部功能。
首先把这段代码添加到网站的 footer.php 文件中。
<a href="#" class="cd-top"></a>
然后是JavaScript代码
jQuery(document).ready(function($) {
var offset = 100,
offset_opacity = 1200,
scroll_top_duration = 700,
$back_to_top = $('.cd-top');
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
再把CSS代码添加到style.css样式表文件里面
.cd-top {
position: fixed;
right: 1%;
bottom: -999px;
z-index: 99999;
width: 50px;
height: 60px;
background: url(https://s1.ax1x.com/2020/06/08/tflxvq.png) no-repeat center;
background-size: contain;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
cursor: pointer;
opacity: 0;
}
.cd-top.cd-is-visible {
opacity: .7;
bottom: 8%;
}
.cd-top.cd-fade-out {
opacity: .85;
}
.cd-top:hover {
opacity: 1;
}
@media screen and (max-width: 860px) {
.cd-top {
height: 40px;
width: 50px;
}
}
大家可以自由的把图片更换成自己喜欢的样子,我的这个图片是丑了点,可是功能在的呀,哈哈哈哈。测试了一下,效果还是不错的,前端最注重的就是细节,细节做好了,用户的体验感自然就会好,如果吃饭用大碗的程序猿这个站点哪里优化不好的话,欢迎大家留言,我会一一回复,并且改进。如果对你有帮助的话也可以给我留言呀~
原文链接:无插件实现WordPress回到顶部功能