返回顶部按钮

来源：互联网发布：单机免费版进存销软件编辑：程序博客网时间：2024/04/30 09:23

1：简单的回到顶部按钮

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>返回顶部-返回按钮一直存在页面当中</title>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script>  $(function(){    $(".back-to-top").click(function(event) {      $("body,html").animate({scrollTop:0}, 400);//设置滚动条顶部距离窗体高度为0      return false;//阻止默认行为    });  })  </script></head><body><div style="height:1000px;background:red"></div><a class="back-to-top" href="javascript:void(0)">回到顶部</a></body></html>

第二种：滚动条滚动到一定的位置出现返回按钮

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>返回顶部-滚动到一定的位置出现返回按钮</title>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script>$(function(){       $(window).scroll(function(event) {/*为窗体绑定滚动事件*/         if($(window).scrollTop()>1000){/*当滚动条顶部距离窗体1000像数*/          $(".back-to-top").fadeIn(150);//.back-to-top出现         }else{           $(".back-to-top").fadeOut(150);//.back-to-top消失         }       });       $(".back-to-top").click(function(event) {/*为.back-to-top绑定点击事件*/         $("body,html").animate({scrollTop:0},1000);/*滚动条回到顶部*/         return false;       });})  </script>  <style>  .back-to-top{position: fixed;display: none;bottom: 200px;right: 80px;}  </style></head><body><div style="height:1500px;background:red"></div><a class="back-to-top" href="javascript:void(0)">回到顶部</a><div style="height:1000px;background:yellow"></div></body></html>

返回顶部-滚动到一定的位置增加类，滚动到另一位置时删除类

<script>$(function(){$(window).scroll(function(event) { if($(window).scrollTop()>100){  $(".header").addClass('margin0'); }else if($(window).scrollTop()<200){  $(".header").removeClass('margin0').addClass('padd01') }});})  </script>

0 0