终于基本完成了(请看向页面最右边→_→),虽然还是有不足,但是基本能用的了。
存在的不足:
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>之间任意位置,也就是跟第一步一样。
相关推荐
jQuery动画滑动回到顶部和底部javascript特效代码
页面布局 <body id="wrapper"> <div id="container"></div> </body> 引用组件 引用组件支持下面两种方式: clone之后直接拷贝引用bin文件夹下面的preventoverscroll.min.js 从npm下载安装 npm install...
主要介绍了js判断滚动条是否已到页面最底部或顶部的原理与方法,以实例的形式详细分析了js实现返回顶部功能所涉及的各种技巧,并对相关知识点进行了总结归纳,需要的朋友可以参考下
下面小编就为大家分享一篇Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
js/html实现滚动到顶部 底部 某个指定位置 简单易懂上来就能使用
基于jQuery插件的返回顶部网页按钮,能自动在网页底部显示一个返回顶部的按钮,可提高用户浏览网页的易用性。 安装说明: 1 把desktop文件夹上传到论坛根目录。 2 打开template目录下与论坛相对应的模板目录下的...
很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟...
1、怎样用纯js判断滚动条是否到底部? 先了解几个关键词: (1)滚动条到顶部的位置:scrollTop (2)当前窗口内容可视区:windowHeight (3)滚动条内容的总高度:scrollHeight 触发监听的函数是: [removed] = ...
基于vue.js的仿支付宝导航条吸顶滑动效果组件,导航菜单数量和内容菜单数量可随意扩展,且导航菜单字数无限制,随意配置,如果顶部和底部有固定占位元素,也可直接配置,无需额外修改样式。 示例图片展示 Build ...
基于Vue实现的侧边栏导航组件,左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具有动画居中效果,可以滑动右侧区域来切换导航,滑动到屏幕底部时自动切换到下个导航,相反滑动到顶部切换上一屏,效果展示: ...
一个在顶部,另一个在底部。 (重要!)请记住,它仅在监听触摸事件,因此鼠标事件将不起作用。 这是设计使然。 包括脚本并通过以下方式创建新实例var swiper = new SwipeableList({ element: '.swipeable-list', ...
js-offcanvas jQuery可访问的Offcanvas插件,使用ARIA 为什么可以访问 它依赖于 Tab键可循环浏览offcanvas中所有键盘可聚焦的项目 您可以使用Esc关闭它。 产品特点 使用CSS转换和过渡。 BEM c-offcanvas c-...
标题和字幕从顶部和底部滑入,并且出现带有摆动效果的按钮 此主题由 (基于CSS的响应式动画框架)提供支持,该框架用于创建独特的滑块,演示文稿,横幅和其他基于步骤的应用程序。 主题网址: : 作者: - | | ...
109:四屏切换JS广告代码下载 110:JavaScript图片切换效果 下载 111:在线客服代码 下载 112:单独关闭的两边悬挂代码下载 113:全屏可伸缩可关闭广告代码下载 114:四屏JS带缩略图的焦点图 下载 115:书角带阴影的...
这个示例中,我们创建了一个简单的图片浏览网站,其中包括一个顶部的标题栏(header)、一个图像库(gallery)和一个底部的页脚(footer)。图像库使用CSS的网格布局(grid)来自动调整图像的大小和布局。 您需要将...
页面滚动阻尼效果实现 功能描述 要求 页面分为AB两个区域 当手机可视区的底部接触到 “阻尼带” 的时候,有个上拉弹性过程 当上拉到一定阈值程度就直接把B区顶部弹到手机可视区的顶部,让可视区从B区开始显示 当上拉...
2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述。 index.js var url = http://www.imooc.com/cours
109:四屏切换JS广告代码下载 110:JavaScript图片切换效果 下载 111:在线客服代码 下载 112:单独关闭的两边悬挂代码下载 113:全屏可伸缩可关闭广告代码下载 114:四屏JS带缩略图的焦点图 下载 115:书角带阴影的...