jquery 如何实现回顶部带滑动效果

Posted 2023-04-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 如何实现回顶部带滑动效果相关的知识，希望对你有一定的参考价值。

滚动到顶部
$(document.body).animate('scrollTop':0,1000); 这样不可以，能写一下具体的代码吗

返回顶部：设置为body的scrollTop为0

滑动效果：animate（Jquery的自定义动画）

$("#returnTop").click(function ()
        var speed=200;//滑动的速度
        $('body,html').animate( scrollTop: 0 , speed);
        return false;
);

备注：returnTop为触发返回顶部的元素ID

参考技术A window.scrollTo(0,0)

参考技术B $('html,body').animate(scrollTop: 0, 1000);

这样写就可以了

如果你想要获取当前的的scrollTop

当没有DOCTYPE声明的时候document.body.scrollTop一切正常
当有DOCTYPE声明的时候document.body.scrollTop总是输出0；

需要用document.documentElement.scrollTop方法来获取滚动条高度。

参考技术C 获取body的scrolltop 然后jquery动画将scrolltop改成0就返回顶部了。参考技术D 你这个$(document.body)不能这样写，要写成$('body')

jQuery效果与扩展：左右滑动

　　众所周知，jQuery官方效果中有隐藏/显示，淡入淡出，以及上下滑动效果。

　　隐藏和显示HTML元素通过jQuery的hide()和show()方法来实现，比如这一段代码实现了简单的显示和隐藏效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("#hide").click(function(){
 8   $("p").hide();
 9   });
10   $("#show").click(function(){
11   $("p").show();
12   });
13 });
14 </script>
15 </head>
16 <body>
17 <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
18 <button id="hide" type="button">隐藏</button>
19 <button id="show" type="button">显示</button>
20 </body>
21 </html>

　　淡入淡出的方法为：fadeIn() 用于淡入已隐藏的元素，fadeOut() 方法用于淡出可见元素。其语法分别为$(selector).fadeIn(speed,callback);和$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。以下代码演示了淡入效果。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeIn();
 9     $("#div2").fadeIn("slow");
10     $("#div3").fadeIn(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 <p>演示带有不同参数的 fadeIn() 方法。</p>
18 <button>点击这里，使三个矩形淡入</button>
19 <br><br>
20 <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
21 <br>
22 <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
23 <br>
24 <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
25 </body>
26 </html>

　　而上下滑动有slideDown(),slideUp()和slideDown()方法，分别是向下，向上，上下滑动，其语法与淡入淡出比较相似：$(selector).slideDown(speed,callback)。此代码演示了slideDown方法

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>

　　但是有些时候我们只有上下滑动效果是不够的，在近期的一个项目中，需要实现左右滑动的效果，而jQuery官方并没有提供这个左右滑动的效果，多方搜索找到了jQuery的aminate方法：http://www.w3school.com.cn/jquery/effect_animate.asp 通过这个方法可以定制一个自己想要的jQuery效果。经过多方比对，以下方法可以较好地实现左右滑动效果：

<html>  
<head>
<title>slideLeft</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">  
    jQuery.fn.slideLeftHide = function( speed, callback ) {  
        this.animate({  
            width : "hide",  
            paddingLeft : "hide",  
            paddingRight : "hide",  
            marginLeft : "hide",  
            marginRight : "hide"  
        }, speed, callback );  
    };  
    jQuery.fn.slideLeftShow = function( speed, callback ) {  
        this.animate({  
            width : "show",  
            paddingLeft : "show",  
            paddingRight : "show",  
            marginLeft : "show",  
            marginRight : "show"  
        }, speed, callback );  
    };  


<!-- <script type="text/javascript">  -->
    function hide(){
        $(".2").hide();
        $(".2").slideLeftHide("slow"); 
        document.getElementById("div1").style.width="100%";

    }
    function show(){
        $(".2").slideLeftShow("slow");
        document.getElementById("div1").style.width="48%";    
    }

    window.onload=hide;
</script>  
  
  
</head>  
<body>  
    <div style="margin:20px 0;">
    
        <button onclick="show()">show</button>
        <button onclick="hide()">hide</button>
                
    </div>
    <!--<div>-->
        <div class="1" style="float:left;width: 30%" id="div1"> 
            <h1>div_1</h1>    
            <div>
                <h2>32岁的亨利就坐在那里，深情的目光望过去，都是自己22岁的影子。
                380场比赛，226个进球，4座英超金靴，2座英超奖杯，49场不败，历史最佳射手，海布里的最后一战，海布里的最后一吻。
                当烟花升起的时候，那个曾属于亨利的海布里国王时代不会随年华逝去，而只会在年华的飘零中常常记起。</h2>
            </div>
            <div>
                <img src="http://i0.sinaimg.cn/ty/g/pl/2014-10-04/U10994P6T12D7358443F44DT20141004124015.jpg">            
                <img src="http://i0.sinaimg.cn/ty/g/pl/2014-10-04/U10994P6T12D7358443F44DT20141004124015.jpg">
                
            </div>
        
        </div>
        
        <div class="2" style="float:right;width:48%" id="div2"> 
            <h1>div_2 </h1>
        
            <h2>还是回到伦敦吧，通往海布里的快车一趟一趟的运行着。这里面总会走过客，迎来新生。
            06年5月7日，即将送走的过客正是93岁的枪手圣地-海布里。队长亨利上演帽子戏法为这座拥有无限辉煌的球场告别。</h2>
                
            <img src="http://photocdn.sohu.com/20051107/Img227415098.jpg" border="0">
            <img src="http://photocdn.sohu.com/20051107/Img227415098.jpg" border="0">
        </div>
    
    <!--</div>-->
    
</body>  
</html>

效果如图

参考及实例代码来源：W3School

以上是关于jquery 如何实现回顶部带滑动效果的主要内容，如果未能解决你的问题，请参考以下文章

怎样用js写返回顶部的滑动效果

导航上的淡入淡出和滑动效果（jQuery）

TabTopAutoLayout自定义顶部选项卡区域（带下划线）（动态选项卡数据且可滑动）

ListView悬浮头部展现效果

Android实现布局顶部底部上下滑动效果

jquery 如何实现回顶部 带滑动效果

jQuery效果与扩展：左右滑动

jquery 如何实现回顶部带滑动效果