返回顶部 back to top 设计

 

直接在HTML里面加入如下代码就可以实现

首先引入jquery支持

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"</script>

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"</script>

其次,加入如下代码就可以。

—————————————-
<!– back top start –>

<style>
#back_top {
width: 40px;
height: 40px;
text-align: center;
line-height: 39px;
position: fixed;
right: 15px;
bottom: 50px;
color: #fff;
border-radius: 50%;
z-index: 100;
cursor: pointer;
display: none;
background: #008fd3 url(<?php echo get_template_directory_uri().’/static/css/resource/images/backtop.svg’; ?>) center center/40% auto no-repeat
}

body {
overflow – x: hidden;
}
</style>

<!– 回到顶部 Start –>
<a id=”back_top” href=”script:;”> <span></span></a>
<!– 回到顶部 End –>

<script>
$(function(){
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$(“#back_top”).fadeIn(1500);
}
else
{
$(“#back_top”).fadeOut(1500);
}
});

//当点击跳转链接后,回到页面顶部位置
$(“#back_top”).click(function(){
if ($(‘html’).scrollTop()) {
$(‘html’).animate({ scrollTop: 0 }, 100);//动画效果
return false;
}
$(‘body’).animate({ scrollTop: 0 }, 100);
return false;
});
});
});
</script>

<!– back top end –>

—————————————–

上面的url可以根据自己网站的URL更改,里面的backtop.svg可以

background: #008fd3 url(xxxx/backtop.svg) center center/40% auto no-repeat

图片可以用这个。
backtop.zip