jquery实现页面常用的返回顶部效果,jquery返回顶部

那是一款基于jquery温火箭重回最上部特效源码,杀绝了页面太长形成的客商重返页面顶部困难。

jquery完毕页面常用的归来顶端效果,jquery再次回到顶上部分

本文实例为我们享用了jquery实现重回最上端死守的一切代码,供我们参谋,具体内容如下

效果图:

澳门新葡亰娱乐官网 1

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>返回顶部</title>
  <style type="text/css">
     *{
       margin: 0;
       padding: 0;
     }
     .wrap{
       height: 2000px;
     }
     .gotop{
       display: block;
       width: 32px;
       height: 32px;
       background-color: red;
       text-align: center;
       text-decoration: none;
       font-size: 14px;
       font-weight: bold;
       color: white;
       line-height: 32px;
       position: fixed;
       right:50px;
       bottom:50px; 
       opacity: 0;
       /*top: 500px;*/
     }
  </style>
</head>
<body>
   <div class="wrap">
       <a href="###" class="gotop">TOP</a>
   </div>
   <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(function(){
         // 当滚动条滚动大于200时出现,未大于,消失
         $(window).scroll(function(){
           if($(document).scrollTop()<200){
             // alert("kk");
             $(".gotop").stop().animate({

                 opacity: 0

             },1000)
           }
           else{
             $(".gotop").show().stop().animate({

                 opacity: 1

             },1000)
           }
        })
       // 返回顶部
       $(".gotop").on("click",function(){
          $("html body").animate({
             scrollTop:0
          },1000)
       })
    })
   </script>
</body>
</html>

盼望本文所述对大家学习javascript程序设计有着扶植。

澳门新葡亰娱乐官网 ,为我们享用的jquery温火箭再次回到最上端代码如下

你只怕感兴趣的稿子:

  • JQuery 动画卷页 再次回到顶端 动漫特效(宽容ChromeState of Qatar
  • 据悉jquery的回来顶上部分效果(包容IE6)
  • ASP.NET jQuery 实例9 透过控件hyperlink实现重临顶端意义
  • 仿天涯论坛腾讯网再次来到顶端的jquery实现代码
  • js+JQuery重返最上端功用如何落实
  • 用jQuery达成的智能隐敝、滑动作效果果的回来顶上部分代码
  • jquery左侧浮动到自然地点时显得重临顶端开关
  • jQuery落成重回最上端功用切合不帮衬js的浏览器
  • jquery 完毕重返最上端功能
  • jquery温火箭再次回到顶上部分代码分享

本文实例为大家大饱眼福了jquery达成重临顶上部分成效的一体代码,供我们仿效,具体内容如下…

headtitlejquery小火箭返回顶部代码/title link href="css/top.css" rel="stylesheet" type="text/css"//headbody /heada href="javascript:;"回到顶部/a script src="js/jquery-1.6.4.min.js" type="text/javascript"/script script src="js/top.js" type="text/javascript"/scriptp脚本之家/p pjquery小火箭返回顶部/ppjquery小火箭返回顶部/ppjquery小火箭返回顶部/ppjquery小火箭返回顶部/ppjquery小火箭返回顶部/p/body/html

源码下载

运维效果图:

如上就是为咱们享受的jquery小火箭重回顶端代码,希望我们能够赏识

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图