回到和返回顶部代码实例
文章来源：365jz.com 点击数：314 更新时间：2018-10-22 10:27 参与评论
在网站里很常见的点击回到头部，点击回到顶部，今天我们就来讲讲那些特别简单的点击就能回到头部的代码。
回到和返回顶部代码实例代码一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery火箭图标返回顶部代码 - 365建站网</title>
<script src="https://www.365jz.com/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<style type="text/css">
body{height:3000px;}
/*回到顶部*/
#rocket-to-top div {
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 149px;
}
#rocket-to-top .level-2 {
background: url("https://www.365jz.com/images/common/o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
display: none;
height: 250px;
opacity: 0;
z-index: 1;
}
#rocket-to-top .level-3 {
background: none repeat scroll 0 0 transparent;
cursor: pointer;
display: block;
height: 150px;
z-index: 2;
}
#rocket-to-top {
background: url("https://www.365jz.com/images/common/o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
cursor: default;
display: block;
height: 250px;
margin: -125px 0 0;
overflow: hidden;
padding: 0;
position: fixed;
right: 0;
top: 80%;
width: 149px;
z-index: 11;
}
</style>
<script type="text/javascript">
// jQuery火箭图标返回顶部代码
$(function() {
var e = $("#rocket-to-top"),
t = $(document).scrollTop(),
n,
r,
i = !0;
$(window).scroll(function() {
var t = $(document).scrollTop();
t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
marginTop: "-1000px"
},
"normal",
function() {
e.css({
"margin-top": "-125px",
display: "none"
}),
i = !0
})) : e.fadeIn("slow")
}),
e.hover(function() {
$(".level-2").stop(!0).animate({
opacity: 1
})
},
function() {
$(".level-2").stop(!0).animate({
opacity: 0
})
}),
$(".level-3").click(function() {
function t() {
var t = e.css("background-position");
if (e.css("display") == "none" || i == 0) {
clearInterval(n),
e.css("background-position", "0px 0px");
return
}
switch (t){
case "0px 0px":
e.css("background-position", "-298px 0px");
break;
case "-298px 0px":
e.css("background-position", "-447px 0px");
break;
case "-447px 0px":
e.css("background-position", "-596px 0px");
break;
case "-596px 0px":
e.css("background-position", "-745px 0px");
break;
case "-745px 0px":
e.css("background-position", "-298px 0px");
}
}
if (!i) return;
n = setInterval(t, 50),
$("html,body").animate({scrollTop: 0},"slow");
});
});
</script>
</head>
<body>
<center>
<h2>jQuery火箭图标返回顶部代码</h2>
<h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3>
</center>
<!-- 火箭 -->
<div style="display: none;" id="rocket-to-top">
<div style="opacity:0;display: block;" class="level-2"></div>
<div class="level-3"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="https://www.365jz.com/" target="_blank">365jz</a></p>
</div>
</body>
</html>回到和返回顶部代码实例代码二：
1、html代码
<button class="back_to_top">返回顶部</button>
2、css代码
.back_to_top{
position: fixed;
bottom:30px;
right: 30px;
border:1px solid #888;
}3、js代码
var backButton=$('.back_to_top');
function backToTop() {
$('html,body').animate({
scrollTop: 0
}, 800);
}
backButton.on('click', backToTop);
$(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */
if ($(window).scrollTop() > $(window).height())
backButton.fadeIn();
else
backButton.fadeOut();
});
$(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离 $(window).scrollTop() 或者$(document).scrollTop() ，但是前者更兼容
$(window).height() 获取当前浏览器窗口的大小，浏览器拉伸大小就会变
$(document).height() 获取整个文档的高度
回到和返回顶部代码实例代码三
html中直接使用设置锚点，即将a标签的herf设成要定位到的位置上的元素的id。
定位到div id="pos",则给一个a标签
<a href="#pos"></a>
回到和返回顶部代码实例代码四
示例如下：
<script>
$(function(){
$(".return").click(function() {
$("html,body").animate({scrollTop:0}, 500);
});
})
</script>回到和返回顶部代码实例代码五
JS返回顶部实例代码，供大家参考，具体内容如下
html/css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="返回顶部效果.js"></script>
<style>
.container{
width:1190px;
margin: 0px auto;
}
.container a{
display: none;
width:40px;
height:40px;
background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
position: fixed;
left:95%;
bottom: 50px;
}
.container a:hover{
background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
background-position: left -40px;
}
</style>
</head>
<body>
<div>
<img src="/535e0ce800015b7511902787.jpg" alt="">
<a id="btn" href="javascript:" title="回到顶部"></a>
</div>
</body>
</html>JS部分
window.onload=function(){
var obtn=document.getElementById("btn");
var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
var isTop=true;
var timer=null;
window.onscroll=function(){
var topH=document.documentElement.scrollTop||document.body.scrollTop;
if(topH>clientHeight){
obtn.style.display="block";
}else{
obtn.style.display="none";
}
}
obtn.onclick=function(){
timer=setInterval(function(){
var topH=document.documentElement.scrollTop||document.body.scrollTop;
var stepLength=Math.ceil(topH/5);
document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
if(topH==0){
clearInterval(timer);
}
},30);
}
}如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
