回到和返回顶部代码实例
文章来源：365jz.com 点击数：227 更新时间：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);
}
}如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
