返回到顶部
2018/12/23 20:24:11
返回到顶部
HTML
<a href="#" id="top" class="go-top"></a>
CSS
.go-top{
position:fixed;
right:0;
bottom:10px;
height: 38px;
width:38px;
background:url(/Images/scrolltop.png);
background-size:100% 100%;
}
.go-top:hover{
background:url(/Images/go-top-hover.jpg);
background-size:100% 100%;
}
JavaScript
$(document).ready(function (e) {
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) { //大于100行才出现跳转箭头
$("#top").fadeIn(500); //大于1500行时跳转箭头慢慢透明显示
}
else {
$("#top").fadeOut(500); //大于1500行时跳转箭头慢慢透明消失
}
});
//当点击跳转链接后,回到页面顶部位置
$("#top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 500);//1s完成回到顶部
return false;
});
});
});
素材图片
图片点击右键保存
扫码分享
版权说明
作者:SQBER
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
{0}
{5}
{1}
{2}回复
{4}
*昵称:
*邮箱:
个人站点:
*想说的话: