您现在的位置： 365建站网 > 365文章 > 回到和返回顶部代码实例

回到和返回顶部代码实例

文章来源：365jz.com     点击数：298    更新时间：2018-10-22 10:27   参与评论

在网站里很常见的点击回到头部，点击回到顶部，今天我们就来讲讲那些特别简单的点击就能回到头部的代码。

回到和返回顶部代码实例代码一：


</>code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>jQuery火箭图标返回顶部代码 - 365建站网</title>
  6. <script src="https://www.365jz.com/js/jquery-1.11.1.min.js" type="text/javascript"></script>
  7. <style type="text/css">
  8. body{height:3000px;}
  9. /*回到顶部*/
  10. #rocket-to-top div {
  11.     left: 0;
  12.     margin: 0;
  13.     overflow: hidden;
  14.     padding: 0;
  15.     position: absolute;
  16.     top: 0;
  17.     width: 149px;
  18. }
  19. #rocket-to-top .level-2 {
  20.     background: url("https://www.365jz.com/images/common/o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
  21.     display: none;
  22.     height: 250px;
  23.     opacity: 0;
  24.     z-index: 1;
  25. }
  26. #rocket-to-top .level-3 {
  27.     background: none repeat scroll 0 0 transparent;
  28.     cursor: pointer;
  29.     display: block;
  30.     height: 150px;
  31.     z-index: 2;
  32. }
  33. #rocket-to-top {
  34.     background: url("https://www.365jz.com/images/common/o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
  35.     cursor: default;
  36.     display: block;
  37.     height: 250px;
  38.     margin: -125px 0 0;
  39.     overflow: hidden;
  40.     padding: 0;
  41.     position: fixed;
  42.     right: 0;
  43.     top: 80%;
  44.     width: 149px;
  45.     z-index: 11;
  46. }
  47.     
  48. </style>
  49. <script type="text/javascript">
  50. // jQuery火箭图标返回顶部代码
  51. $(function() {
  52.     var e = $("#rocket-to-top"),
  53.     t = $(document).scrollTop(),
  54.     n,
  55.     r,
  56.     i = !0;
  57.     $(window).scroll(function() {
  58.         var t = $(document).scrollTop();
  59.         t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
  60.             marginTop: "-1000px"
  61.         },
  62.         "normal",
  63.         function() {
  64.             e.css({
  65.                 "margin-top": "-125px",
  66.                 display: "none"
  67.             }),
  68.             i = !0
  69.         })) : e.fadeIn("slow")
  70.     }),
  71.     e.hover(function() {
  72.         $(".level-2").stop(!0).animate({
  73.             opacity: 1
  74.         })
  75.     },
  76.     function() {
  77.         $(".level-2").stop(!0).animate({
  78.             opacity: 0
  79.         })
  80.     }),
  81.     $(".level-3").click(function() {
  82.         function t() {
  83.             var t = e.css("background-position");
  84.             if (e.css("display") == "none" || i == 0) {
  85.                 clearInterval(n),
  86.                 e.css("background-position", "0px 0px");
  87.                 return
  88.             }
  89.             switch (t){
  90.             case "0px 0px":
  91.                 e.css("background-position", "-298px 0px");
  92.                 break;
  93.             case "-298px 0px":
  94.                 e.css("background-position", "-447px 0px");
  95.                 break;
  96.             case "-447px 0px":
  97.                 e.css("background-position", "-596px 0px");
  98.                 break;
  99.             case "-596px 0px":
  100.                 e.css("background-position", "-745px 0px");
  101.                 break;
  102.             case "-745px 0px":
  103.                 e.css("background-position", "-298px 0px");
  104.             }
  105.         }
  106.         if (!i) return;
  107.         n = setInterval(t, 50),
  108.         $("html,body").animate({scrollTop: 0},"slow");
  109.     });
  110. });
  111. </script>
  112. </head>
  113. <body>
  114. <center>
  115. <h2>jQuery火箭图标返回顶部代码</h2>
  116. <h3>滚动滑动条后，查看右下角查看效果。很炫哦！！</h3>
  117. </center>
  118. <!-- 火箭 -->
  119. <div style="display: none;" id="rocket-to-top">
  120.     <div style="opacity:0;display: block;" class="level-2"></div>
  121.     <div class="level-3"></div>
  122. </div>
  123. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  124. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
  125. <p>来源：<a href="https://www.365jz.com/" target="_blank">365jz</a></p>
  126. </div>
  127. </body>
  128. </html>

回到和返回顶部代码实例代码二：

1、html代码

</>code
  1. <button class="back_to_top">返回顶部</button>

2、css代码

</>code
  1. .back_to_top{
  2.     position: fixed;
  3.     bottom:30px;
  4.     right: 30px;
  5.     border:1px solid #888;
  6. }

3、js代码

</>code
  1.     var backButton=$('.back_to_top');
  2.     function backToTop() {
  3.         $('html,body').animate({
  4.             scrollTop: 0
  5.         }, 800);
  6.     }
  7.     backButton.on('click', backToTop);
  8.  
  9.     $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时，回到顶部按钮就显示 */
  10.         if ($(window).scrollTop() > $(window).height())
  11.             backButton.fadeIn();
  12.         else
  13.             backButton.fadeOut();
  14.     });
  15.     $(window).trigger('scroll');/*触发滚动事件，避免刷新的时候显示回到顶部按钮*/


要点：获取滚动条的垂直偏移，即当前页面顶端到整个页面顶端的距离   $(window).scrollTop() 或者$(document).scrollTop() ，但是前者更兼容

$(window).height()   获取当前浏览器窗口的大小，浏览器拉伸大小就会变

$(document).height()  获取整个文档的高度


回到和返回顶部代码实例代码三

html中直接使用设置锚点，即将a标签的herf设成要定位到的位置上的元素的id。

    定位到div id="pos",则给一个a标签

</>code
  1. <a href="#pos"></a>

 

回到和返回顶部代码实例代码四


示例如下：


</>code
  1. <script>
  2. $(function(){
  3.  $(".return").click(function() {
  4.  $("html,body").animate({scrollTop:0}, 500);
  5.  });
  6. })
  7. </script>


回到和返回顶部代码实例代码五


JS返回顶部实例代码，供大家参考，具体内容如下

html/css部分

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Document</title>
  6.  <script src="返回顶部效果.js"></script>
  7. <style>
  8.  .container{
  9.  width:1190px;
  10.  margin: 0px auto;
  11.  }
  12.  .container a{
  13.  display: none;
  14.  width:40px;
  15.  height:40px;
  16.  background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
  17.  position: fixed;
  18.  left:95%;
  19.  bottom: 50px;
  20.  }
  21.  .container a:hover{
  22.  background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
  23.  background-position: left -40px;
  24.  }
  25. </style> 
  26. </head>
  27. <body>
  28.  <div>
  29.  <img src="/535e0ce800015b7511902787.jpg" alt="">
  30.  <a id="btn" href="javascript:" title="回到顶部"></a>
  31.  </div>
  32. </body>
  33. </html>

JS部分

</>code
  1. window.onload=function(){
  2.  var obtn=document.getElementById("btn");
  3.  var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
  4.  var isTop=true;
  5.  var timer=null;
  6.  window.onscroll=function(){
  7.  var topH=document.documentElement.scrollTop||document.body.scrollTop;
  8.  if(topH>clientHeight){
  9.   obtn.style.display="block";
  10.  }else{
  11.   obtn.style.display="none";
  12.  }
  13.  }
  14.  obtn.onclick=function(){
  15.  timer=setInterval(function(){
  16.   var topH=document.documentElement.scrollTop||document.body.scrollTop;
  17.   var stepLength=Math.ceil(topH/5);
  18.   document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
  19.   if(topH==0){
  20.   clearInterval(timer);
  21.   }
  22.  },30);
  23.  }
  24. }


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (298人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号