纯CSS实现回到顶部和jquery回到顶部方法举例

主要介绍纯CSS实现回到页面顶部和利用jquery是下面回到页面顶部的方法。//锚点跳转平滑过渡距离顶部距离0 $(.floor-bar-left a).click(function(){

主要介绍纯CSS实现回到页面顶部和利用jquery是下面回到页面顶部的方法。

纯CSS实现回到顶部和jquery回到顶部方法举例

//锚点跳转平滑过渡距离顶部距离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>
 

方法二:jquery的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://www.mongziit.com/2604.html

发表评论