最新推荐文章于 2023-09-20 15:33:59 发布

oldbalck

最新推荐文章于 2023-09-20 15:33:59 发布

阅读量488

点赞数

文章标签： python javascript xhtml ViewUI

原文链接：https://my.oschina.net/parchments/blog/655027

版权

2019独角兽企业重金招聘Python工程师标准>>>

//锚点跳转平滑过渡距离顶部距离0
$('.floor-bar-left a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 300);
return false;
});

//锚点跳转平滑过渡距离顶部距离100
$('.floor-bar-left a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - 100
}, 300);
return false;
});

方法一：纯css实现回到顶部

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css回到顶部</title>
</head>

<body>

<a name="top"></a>
<div style="width:100%; height:1500px;"></div>
<a href="#top" style="display:block;width:35px; height:42px; border:1px solid #000;
position:fixed; right:20px; bottom:20px;">回到<br/>顶部</a>

</body>

</html>

方法二：jq的animate()方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>回到顶部</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
   <style>
      .f_conct {background-color: #0d5baa;position: fixed;  z-index: 9999999;  
      top: 200px;  right: -10px;  cursor: pointer;  transition: all .3s ease;  }
      .f_bar .f_top {background: #0d5baa url(images/fiex.png) no-repeat 0 -8px;  }
   </style>
</head>

<body>
<div style="height: 2000px"></div>
   <div class="f_conct" style="right:0;">
      <div class="f_bar">
         <ul>
         <li class="f_top">返回顶部</li>
         </ul>
      </div>
   </div>
   
   ------重点！！！！！！！------
   <script>
      $(".f_top").click(function(){
         $("html,body").animate({
            'scrollTop':'0'
         },300);
      });
      /*如有侵权，请联系删除
      scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
      scroll top offset 指的是滚动条相对于其顶部的偏移。
      嵌套animate()方法的解释---（来自w3cschool）
      jQuery animate() 方法用于创建自定义动画。
      语法：
      $(selector).animate({params},speed,callback);
      必需的 params 参数定义形成动画的 CSS 属性        。
      可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
      可选的 callback 参数是动画完成后所执行的函数名称。
      下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 
      属性等于 250 像素为止：
      实例
      $("button").click(function(){
        $("div").animate({left:'250px'});
      }); */
   </script>
   
</body>
</html>

转载于:https://my.oschina.net/parchments/blog/655027