粗略几步实现重返顶端成效,jquery再次来到最上部www.bifa88.com

明日与大家大快朵颐下网页中平常出现的回来顶端效果

有的是的网站上都有重返最上部成效,判定滚动参数动态显示与潜伏,相比吻合初大方

jquery达成页面常用的归来最上部效果,jquery重回最上端

正文实例为我们享受了jquery落成再次来到顶上部分效益的全部代码,供我们参谋,具体内容如下

效果图:

www.bifa88.com 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程序设计有所扶助。

对照原生Javascript,jquery完结起来能够简单非常多代码。

<!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>实现动态的显示回到顶部与否</title>
<style>
/*返回顶部*/
.back_top {width:45px;height:45px;background:url(back_top_new.png) 0 0;position:fixed;left:50%;margin-left:500px;bottom:105px;display:none;}
.back_top:hover{background:url(images/back_top_new.png) 0 -46px;}
</style>
</head>

<body>
<a title="返回顶部" href="javascript:void(0)" class="back_top"></a>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
});
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, function(e){
var t=document.body.scrollTop+document.documentElement.scrollTop;
if(t==0){
$(".back_top").css("display","none");
}
else{
$(".back_top").css("display","block");
}
}, false);

</script>
</body>
</html>

你大概感兴趣的篇章:

  • JQuery 动画卷页 重临顶上部分 动画特效(兼容Chrome)
  • 依赖jquery的归来最上端效果(包容IE6)
  • ASP.NET jQuery 实例9 通过控件hyperlink达成重返顶端功效
  • 仿乐乎今日头条重临顶上部分的jquery完结代码
  • js+JQuery重临顶端功效如何达成
  • 用jQuery完毕的智能隐藏、滑动效果的回到顶上部分代码
  • jquery左侧浮动到一定地方时显得重回顶端按键
  • jQuery实现重临最上部功用适合不扶助js的浏览器
  • jquery 完结重临顶上部分效用
  • jquery温火箭再次来到顶上部分代码分享

本文实例为大家享用了jquery达成重返顶端效应的全部代码,供我们参谋,具体内容如下…

接下去就间接贴代码啦:

你恐怕感兴趣的小说:

  • javascript轻易实现跟随滚动条漂浮的回到最上部按键效果
  • jquery达成页面常用的回到顶上部分效果
  • jQuery达成重回最上端功能
  • 依据jQuery达成重回顶端实例代码
  • jQuery实现的天性化再次来到底部与再次回到顶上部分特效代码
  • jquery文火箭重回最上端代码分享
  • jQuery达成重回顶端职能的不二等秘书技
  • js轻便的点击重临顶上部分效益完结形式
  • javascript实现微博页面右下角再次回到最上端按键
  • jQuery完毕重返最上部效用适合不援助js的浏览器
  • 粗略几步完毕重临顶上部分作用
$(function(){
    $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发
        var wHeight=$(window).height(); //获取浏览器可视窗口高度
        var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度
        if(wTop>=wHeight) //当滚动条距离顶部高度超过一屏时执行
        {
           $("#btn").show(); //返回顶部按钮显示
        }
        else{
           $("#btn").hide(); //返回顶部按钮隐藏
        }
      });
      $("#btn").click(function(){
          $("html,body").animate({scrollTop:0},500); //页面500毫秒返回顶部
      });
 });

 ok,是否很轻巧,jquery直接为大家提供的animate方法能够高速完毕重回顶上部分的动画效果。

如上正是本文的全部内容,希望对大家享有帮助,同一时候也可望多多支持脚本之家!

你大概感兴趣的小说:

  • javascript简单完毕跟随滚动条漂浮的归来顶上部分按键效果
  • jquery完毕页面常用的回到顶端效果
  • jQuery达成再次回到顶端功效
  • 传说jQuery完成重返顶端实例代码
  • jQuery达成的性情化重临尾部与重临最上部特效代码
  • jquery大火箭再次回到顶上部分代码分享
  • jQuery完毕重回顶部意义的主意
  • js轻便的点击再次来到最上部职能落到实处情势
  • javascript落到实处和讯页面右下角再次来到最上部按键
  • 回到最上部开关响应滚动且动态展现与隐藏
  • jQuery完毕重回最上部效率适合不帮衬js的浏览器