一个简单回到顶部效果-超过高度显示侧边返回顶部按钮

来源: 互联网日期: 2020-07-13 20:31:44

代码如下：

<!doctype html>

<html>

<head>

p#top{ position:fixed;display:none;bottom:100px;right:80px;}

p#top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;transition:color 1s;}

p#top a:hover{ color:#979797; }

p#top a span{background:url(top.png) no-repeat center;border-radius:6px;display:block;height:64px;transition:background 1s;}

#top a:hover span{background:url(top.png) no-repeat center;}

</style>

$(document).ready(function(e) {

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function () {

$(window).scroll(function(){

if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头

$("#top").fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示

}

else

{

$("#top").fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失

}

});

//当点击跳转链接后，回到页面顶部位置

$("#top").click(function(){

$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部

return false;

});

</script>

</head>

<body>

返回顶部

</a>

</p>

</body>

</html>