您的位置：首页 > Web前端 > JavaScript

js,jq,锚点 分别实现返回顶部

2017-05-20 12:03 435 查看
效果预览：



锚点实现：

锚点效果生硬，用户体验差，但没兼容性问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
display: block;
margin: 0 auto;
}
a{
display: block;
width: 33px;
height: 36px;
background-color: #999999;
color: white;
text-decoration: none;
font-size: 14px;
padding: 5px;
position: fixed;
right: 15px;
bottom: 50px;
text-align: center;
}
</style>
</head>
<body>
<img src="../img/tb_bg.jpg" alt="" />
<a href="#">返回顶部</a>
</body>
</html>


js 实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
display: block;
margin: 0 auto;
}
a{
display: block;
width: 33px;
height: 36px;
background-color: #999999;
color: white;
text-decoration: none;
font-size: 14px;
padding: 5px;
position: fixed;
right: 15px;
bottom: 50px;
text-align: center;
}
</style>
</head>
<body>
<img
4000
src="../img/tb_bg.jpg" alt="" />
<a id="return_top">返回顶部</a>
<script type="text/javascript">
window.onload = function(){
var clientHeight = document.documentElement.clientHeight;
var button_a = document.getElementById("return_top");
var timer = null;
var isTop = true;

window.onscroll = function(){
var w_top = document.documentElement.scrollTop || document.body.scrollTop;
if(w_top >= clientHeight){
button_a.style.display = "block";
}else{
button_a.style.display = "none";
}
if(!isTop){
clearInterval(timer);
}
isTop = false;
}

button_a.onclick = function(){
timer = setInterval(function(){
var w_top = document.documentElement.scrollTop || document.body.scrollTop;
var is_t = Math.floor(-w_top / 6);
document.documentElement.scrollTop = document.body.scrollTop = w_top + is_t;
isTop = true;
if(w_top == 0){
clearInterval(timer);
}
},30);
}
};
</script>
</body>
</html>


jq实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
display: block;
margin: 0 auto;
}
a{
display: block;
width: 33px;
height: 36px;
background-color: #999999;
color: white;
text-decoration: none;
font-size: 14px;
padding: 5px;
position: fixed;
right: 15px;
bottom: 50px;
text-align: center;
}
</style>
</head>
<body>
<img src="../img/tb_bg.jpg" alt="" />
<a class="return_top">返回顶部</a>
<script type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var w_top = $(window).scrollTop();
var k_height = $(window).height();
if(w_top >= k_height){
$(".return_top").css("display","block");
}else{
$(".return_top").css("display","none");
}
});

$(".return_top").click(function(){
$("body,html").animate({
scrollTop: 0
},500);
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  锚点 返回顶部 js jq
相关文章推荐
新的分享
章节导航