当前位置: 首页 > 编程笔记 >

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

孙俊彦
2023-03-14
本文向大家介绍jquery实现页面常用的返回顶部效果,包括了jquery实现页面常用的返回顶部效果的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下

效果图:

实现代码:

<!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实现返回顶部效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下: 1、首先是CSS样式: 2、接着是jquery代码:(要引入jQuery核心库) 3、引用页面: 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍jQuery实现回到顶部效果,包括了jQuery实现回到顶部效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery实现回到顶部效果的具体代码,供大家参考,具体内容如下 动画:通过点击侧栏导航,页面到达相应的位置 jQuery方法:show(), hide(), animate() 动画效果: 代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家

  • 本文向大家介绍jquery实现点击页面回到顶部,包括了jquery实现点击页面回到顶部的使用技巧和注意事项,需要的朋友参考一下 a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示【回到顶部+回到首页】的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长

  • 本文向大家介绍jquery 实现返回顶部功能,包括了jquery 实现返回顶部功能的使用技巧和注意事项,需要的朋友参考一下 今天搞了一个回到顶部的JS JQ功能,废话不多说,有图有真相! 代码很简单,各位直接拿去,放在自己项目中即可,如有bug请给我留言,共同完善 方法二: 主要参数: scrollName: 'scrollUp', // Element ID topDistance: '300'

  • 本文向大家介绍一句jQuery代码实现返回顶部效果(简单实用),包括了一句jQuery代码实现返回顶部效果(简单实用)的使用技巧和注意事项,需要的朋友参考一下 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: 使用代码: 也就是: $.fn.yestop(); 这句代码就可以了。 当然还有高级的设置,如换图片,设置图标为圆形,设置位置,设置时间等等

  • 本文向大家介绍jQuery中页面返回顶部的方法总结,包括了jQuery中页面返回顶部的方法总结的使用技巧和注意事项,需要的朋友参考一下 当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。 方法一 锚点定位 这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的)。 方法二 window.scrollTo(x,y) 这种方法也