JS 页面滑动底部顶部

最新推荐文章于 2022-01-11 11:13:49 发布

chenweishaoxing

最新推荐文章于 2022-01-11 11:13:49 发布

阅读量303

点赞数

分类专栏： html 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/chenweishaoxing/article/details/84397693

版权

html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

网页添加页面滑动按钮(回到顶部、底部、暂停滑动)

终于基本完成了（请看向页面最右边→_→），虽然还是有不足，但是基本能用的了。

存在的不足：

1.没有实现动态设定滑动用时（你可以把浏览器滑动条拉下一点和拉到底，你会发现运动速度不一样）。

2.当你按下滑动按钮后，在动画结束前无法自由拖动浏览器滑动条到其他地方。

这来两个问题都跟滑动条有关。。。主要是滑动条的属性值取得问题我一直解决不了。

下面写一下大概要添加的代码吧。很简单的描述了一下，如果还有不懂的可以到w3school查找相关资料或私信本人。

第一步：

<div id="top_and_bottom">
    <div id="hightotop"></div>
    <div id="slowtotop"></div>
    <div id="stopbtn"></div>
    <div id="slowtobottom"></div>
    <div id="hightobottom"></div>
</div>

添加位置：网页的整体<head>和</head>之间任意位置

第二步：

Ok，我们创建了空间，那下一步就是利用这空间来显示你的按钮了。

<STYLE type="text/css">
                                                                                                                                                                                
  #top_and_bottom{position:fixed;bottom:33%;right:0%;display:block;z-index:100;} 
                                                                                                                                                                        
   #hightotop{ background:url("图片地址") no-repeat;
        position:relative; 
        filter:alpha(opacity=70);       /*IE*/
        -moz-opacity:0.7;             /* Moz + FF */
        opacity: 0.7;               /* 支持CSS3的浏览器（FF 1.5也支持）*/
        cursor:pointer;
        height:16px;
        width:27px;
        margin:20px 0;}
                                                                                                                                                                                
    #slowtotop{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;            
        opacity: 0.7;
        cursor:pointer;
        height:16px;
        width:27px;
        margin:0px 0;}
                                                                                                                                                                                
        #stopbtn{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=80);
        -moz-opacity:0.8;            
        opacity: 0.8;
        cursor:pointer;
        height:14px;
        width:27px;
        margin:5px 0;}
    #slowtobottom{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;            
        opacity: 0.7;
        cursor:pointer;
        height:16px;
        width:27px;
        margin:0px 0;}
                                                                                                                                                                                
    #hightobottom{background:url("图片地址") no-repeat;
        position:relative;
        filter:alpha(opacity=70);
        -moz-opacity:0.7;            
        opacity: 0.7;
        cursor:pointer;
        height:16px;
        width:27px;
        margin:20px 0;}
                                                                                                                                                                                
</STYLE>

添加位置：网页的整体<body>和</body>之间任意位置

第三步：

下面是添加按钮功能部分，我是用jQuery实现的。

<script type="text/javascript" src="http://t.libdd.com/js/libs/jquery/jquery-1.7-latest.js"></script>
<script type="text/javascript">
                                                         
 jQuery.noConflict(); 
 $(document).ready(
                                                         
$.extend({stopall:function(){$('html,body').stop(true,false);}})
                                                         
$('#stopbtn').click(function(){$.stopall();});
                                                         
$('#hightotop').click(function(){
  $.stopall();
  $('html,body').animate({scrollTop: '0px'}, 800);}); 
                                                         
$('#slowtotop').click(function(){
  $.stopall();
  $('body').animate({scrollTop: '0px'}, 25000);}); 
                                                         
$('#slowtobottom').click(function()
{
  $.stopall();
 $('html,body').animate({scrollTop:$('#copyright').offset().top}, 25000);}); 
                                                         
$("#hightobottom").click(function(){
  $.stopall();
 $('html,body').animate({scrollTop:$('#copyright').offset().top}, 800);}); 
                                                         
});/*ready()*/
})(jQuery);
</script>

添加位置：网页的整体<head>和</head>之间任意位置，也就是跟第一步一样。

chenweishaoxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 页面滑动底部顶部

网页添加页面滑动按钮(回到顶部、底部、暂停滑动) 终于基本完成了（请看向页面最右边→_→），虽然还是有不足，但是基本能用的了。存在的不足：1.没有实现动态设定滑动用时（你可以把浏览器滑动条拉下一点和拉到底，你会发现运动速度不一样）。2.当你按下滑动按钮后，在动画结束前无法自由拖动浏览器滑动条到其他地方。这来两个问题都跟滑动条有关。。。主要是滑动条的属性值取得问题我...
复制链接

扫一扫