今天闲来无事写了一段js,题目有点绕,给大家解释一下,就是我们经常会见到一些网站用到这样的特效:在网页往下滚动一定距离之后,返回顶部的按钮才会显示出来,但很少有人对跳转底部的按钮采用同样的效果(反正我没见到过),这是因为到顶部按钮的js是利用scrollTop来实现的,而底部距离则不能直接用scrollTop判断,所以我写了一段js,效果可以自己在我网页滚滚看…
这是常见的返回顶部按钮用到的js,这段js很常见很常见所以就不多说了:
$(window).bind(‘scroll’, function(){
if ($(this).scrollTop() > 100) { $(‘.scrollTop’).fadeIn(); } else { $(‘.scrollTop’).fadeOut(); }
});
$(‘.scrollTop’).click(function(e){
e.stopPropagation();
$(‘body,html’).animate({scrollTop: 0}, 800);
return false;
});
下面是我写的:(重点在红色部分)
$(window).bind('scroll', function(){
if ($(this).scrollTop() > 100) { $('.scrollTop').fadeIn(); } else { $('.scrollTop').fadeOut(); }
if (document.body.scrollHeight-window.screen.height-($(this).scrollTop() )>100) { $('.scrollBot').fadeIn(); } else { $('.scrollBot').fadeOut(); }//xiaohudie.net
});
$('.scrollTop').click(function(e){
e.stopPropagation();
$('body,html').animate({scrollTop: 0}, 800);
return false;
});
$('.scrollBot').click(function(e){
e.stopPropagation();
$('body,html').animate({scrollTop: document.body.scrollHeight}, 800);//xiaohudie.net
return false;
});
原理如下:
- js中关于scrollTop的用法是表示网页滚上去的高度,window.screen.height是指屏幕分辨率的高,也就是当前我们可见区域的高度,document.body.scrollHeight则是指整个网页全部的高度,
- 根据基本的数学知识我们可以算出: 总高度 – 可见区域高度 = 滚上去的高度+可见区域下面没滚到的高度
- 得出: 总高度 – 可见区域高度 – 滚上去的高度 = 可见区域下面没滚到的高度
- 如果可见区域下面没滚到的高度小于100,说明离最底部的距离只有不到100了,这时候就可以隐藏跳转底部的按钮
把我这段js挂上,然后把这段html扔到边栏里,就能让转到底部的按钮滚到离底部100px的时候隐藏
<a class="scrollTop no-ce" href="#">TOP</a> <a class="scrollBot no-ce" href="#">DOWN</a>
css就大家自由发挥吧,我的给大家提供个参考:
.scrollTop,.scrollBot {position:fixed;right:15px;width:50px;height:25px;padding-top:25px;line-height:25px;background:#444;color:#888;text-transform:uppercase;text-decoration:none;text-align:center;font-size:14px;text-shadow:none} .scrollTop{bottom:75px;display:none; } .scrollBot {bottom:15px;} .scrollTop:before,.scrollBot:before {position:absolute;top:11px;left:14px;content:"";} .scrollTop:before{border-bottom:11px solid #888;border-left:11px solid transparent;border-right:11px solid transparent; }.scrollBot:before{border-top:11px solid #888;border-left:11px solid transparent;border-right:11px solid transparent; } .scrollTop:hover:before,.scrollBot:hover:before {border-bottom-color:#eee;} .scrollTop:hover,.scrollBot:hover {color:#eee;}
这东西我的主题自带
二月 22, 2013 19:22:43@零落千起
审题…..伦家是说到底部渐隐 你那个是到顶部 而且伦家第一段就说了两个算法不一样 …
101室 二月 22, 2013 19:25:01@小蝴蝶 @小蝴蝶 :
太长不看
102室 二月 22, 2013 19:25:40@零落千起 我应该加个吐血的表情
103室 二月 22, 2013 19:26:19@小蝴蝶 @小蝴蝶 : 你的博客,滚动越来越卡了
104室 二月 22, 2013 22:09:18@零落千起 你的网速越来越卡了
105室 二月 22, 2013 22:10:19@小蝴蝶 @小蝴蝶 : 这和网速有什么关系…滚动时cpu占有率会高20%
106室 二月 22, 2013 22:11:01@零落千起 让你用ie
107室 二月 22, 2013 22:11:28@小蝴蝶 @小蝴蝶 : ie在中国依然坚挺啊
108室 二月 22, 2013 22:12:06你加了个图片插入?
二月 22, 2013 22:10:07@零落千起 是的~ 嘻嘻
201室 二月 22, 2013 22:10:38@小蝴蝶 @小蝴蝶 : 我上面那条回复就带了图片,没显示啊
202室 二月 22, 2013 22:11:33@零落千起 你没带
203室 二月 22, 2013 22:12:31@小蝴蝶 @小蝴蝶 : 真带了…http://www.ragnaroks.org/my/logo.png…而且你那么大个提示框要求输入,带没带我会不知道啊
204室 二月 22, 2013 22:13:49@零落千起 刷新看你楼上
205室 二月 22, 2013 22:15:34@小蝴蝶 @小蝴蝶 : 我再试试
206室 二月 22, 2013 22:16:06我带个图给你看看

二月 22, 2013 22:14:58这条评论我带图了
二月 22, 2013 22:16:46@零落千起 @零落千起 : 还是没有
401室 二月 22, 2013 22:17:20再试试
二月 22, 2013 22:18:24我只能玩点简单的,复杂一点点,就头大。。尽管文章对我来说很枯燥,但还是认真的看完了,熟练掌握这些代码的话,玩起来应该很过瘾,呵呵。
二月 23, 2013 07:16:15@郑永 你灵感多,更过瘾,哈哈
601室 二月 23, 2013 15:33:27鼠标在页面上下滑了几回,感觉很顺滑,哈哈。
二月 23, 2013 07:17:20@郑永 哈哈,那你多滑滑,有个问题要问你,我现在评论关闭了分页,加上了一个展开收起回复的功能,但我不知道两者相比哪个更好,你觉得呢?是不是展开收起这个比较鸡肋?
701室 二月 23, 2013 15:31:00@小蝴蝶 @小蝴蝶 : 的确比较鸡肋,没什么用处,否这辜负了你的侧边滑动块,另外邮件回复评论无法定位到这条评论,被你隐藏了,评论就是看热闹,隐藏了有的人还不知道怎么回事。
702室 二月 23, 2013 21:21:50@郑永 恩恩,我刚才已经把这个去掉了,本来我是觉得有的回复太长导致页面很卡,但是你说的对,背离了评论的初衷
703室 二月 23, 2013 21:34:49你貌似把侧板滚动条搞太小了,可以放大一点,不好控制,哈哈。。。
二月 23, 2013 08:14:26@郑永 为你这句话我把它去掉了哈哈,本来也就是纯属娱乐,实际用处不大
801室 二月 23, 2013 15:29:31@小蝴蝶 @小蝴蝶 : 这个娱乐可以另外开一个页面,专门搞一些个性化的娱乐,比如以前做网站喜欢把鼠标改样式,喜欢加个嵌套分开页面,喜欢加些工具条听歌,喜欢把侧边的滚动给取消掉,喜欢各种各样的花样,呵呵 :)以前网页喜欢炫耀一点,后来渐渐的感觉简单才好,不过可以另外开一个页面整整花样,也算折腾代码的练习,呵呵。
802室 二月 23, 2013 21:26:02@郑永 恩恩,纯属娱乐的东西确实不需要搞太多,有空我单独开个这样的页面,然后把你钢琴搬进去哈哈哈
803室 二月 23, 2013 21:36:36这样感觉很完善,支持了
二月 23, 2013 13:45:41网站加载了不少js啊
二月 24, 2013 19:07:15@爱软E @爱软E : 折腾..
1001室 二月 24, 2013 23:56:32@第三人称 我爱代码…哈哈
1101室 二月 27, 2013 06:44:20@Arch!tect @Arch!tect :
1201室 二月 26, 2013 14:51:41主题都带了
二月 25, 2013 18:11:07看来我网速不错~~~
二月 25, 2013 18:15:53上学了,记得常来哈。
二月 25, 2013 20:49:54@郑永 唉,才坐稳,忙得团团转
1501室 二月 25, 2013 23:32:25@小蝴蝶 @小蝴蝶 : 稳下就好
1502室 二月 25, 2013 23:54:30@郑永 坐稳之后打开电脑还要先查课表,然后选课..
1503室 二月 25, 2013 23:55:24@小蝴蝶 @小蝴蝶 : 好好专心学习,像大师级前进。
1504室 二月 26, 2013 01:44:51@郑永 用家里大电脑惯了,乍一用笔记本,感觉世界渺小了好多,字都看不清了..
1505室 二月 26, 2013 01:48:07还没休息啊,这页面怎么看不到了。。。
二月 26, 2013 02:01:06好东西,mark一下~~
三月 1, 2013 22:42:57不错,学习了。抄了这段红色的用了 。另外,博客折腾的很有个性的,赞一个!
四月 7, 2013 22:22:30还是这个跳转底部好用。网上找的都不兼容firefox和chrome
五月 19, 2014 09:10:53