终于基本完成了(请看向页面最右边→_→),虽然还是有不足,但是基本能用的了。
存在的不足:
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>之间任意位置,也就是跟第一步一样。