First, the design ideas:
1, add a scroll event of a return to the top of the label.
2, to obtain the position of the scroll bar of the active window when the scroll bar position is 50 pixels from the top of the jump link appears, otherwise disappear
3, add a click event as an icon, use the scroll bar to animate animation settings back to the time required for the top.
Achieve results shown in Figure:
Second, technology
1, html codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
body{
height:1500px;
background-color:#000;
}
<body>
<div>
<a href="javascript:;" id="btn" title="回到顶部"style="width:50px;
height:50px; position:fixed; right:50px; bottom:10px;
background:url('自己的图片url') no-repeat;">
</a>
</div>
</body>
</html>
2、jquery代码
<script type="text/javascript" str="自己的jquery.min.js文件所在地址">
$(document).ready(function() {
//首先将#btn隐藏
$("#btn").hide();
//当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#btn").fadeIn(200);
} else {
$("#btn").fadeOut(200);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#btn").click(function() {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
});
</script>