实现”跳转底部”按钮渐隐的js

今天闲来无事写了一段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;
	});

原理如下:

  1. js中关于scrollTop的用法是表示网页滚上去的高度,window.screen.height是指屏幕分辨率的高,也就是当前我们可见区域的高度,document.body.scrollHeight则是指整个网页全部的高度,
  2. 根据基本的数学知识我们可以算出: 总高度 – 可见区域高度 = 滚上去的高度+可见区域下面没滚到的高度
  3. 得出: 总高度 – 可见区域高度 – 滚上去的高度 = 可见区域下面没滚到的高度
  4. 如果可见区域下面没滚到的高度小于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;}

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 零落千起

    这东西我的主题自带 :guzhang:

    二月 22, 2013 19:22:43
  2. 板 凳 零落千起

    你加了个图片插入?

    二月 22, 2013 22:10:07
  3. 地 板 小蝴蝶

    我带个图给你看看

    二月 22, 2013 22:14:58
  4. 地 毯 零落千起

    这条评论我带图了

    二月 22, 2013 22:16:46
  5. 地 面 零落千起

    再试试

    二月 22, 2013 22:18:24
  6. 地 下 郑永

    我只能玩点简单的,复杂一点点,就头大。。尽管文章对我来说很枯燥,但还是认真的看完了,熟练掌握这些代码的话,玩起来应该很过瘾,呵呵。

    二月 23, 2013 07:16:15
  7. 7 楼 郑永

    鼠标在页面上下滑了几回,感觉很顺滑,哈哈。

    二月 23, 2013 07:17:20
    • 小蝴蝶

      @郑永 哈哈,那你多滑滑,有个问题要问你,我现在评论关闭了分页,加上了一个展开收起回复的功能,但我不知道两者相比哪个更好,你觉得呢?是不是展开收起这个比较鸡肋?

      701室 二月 23, 2013 15:31:00
      • 郑永

        @小蝴蝶 @小蝴蝶 : 的确比较鸡肋,没什么用处,否这辜负了你的侧边滑动块,另外邮件回复评论无法定位到这条评论,被你隐藏了,评论就是看热闹,隐藏了有的人还不知道怎么回事。

        702室 二月 23, 2013 21:21:50
        • 小蝴蝶

          @郑永 恩恩,我刚才已经把这个去掉了,本来我是觉得有的回复太长导致页面很卡,但是你说的对,背离了评论的初衷

          703室 二月 23, 2013 21:34:49
  8. 8 楼 郑永

    你貌似把侧板滚动条搞太小了,可以放大一点,不好控制,哈哈。。。

    二月 23, 2013 08:14:26
    • 小蝴蝶

      @郑永 为你这句话我把它去掉了哈哈,本来也就是纯属娱乐,实际用处不大

      801室 二月 23, 2013 15:29:31
      • 郑永

        @小蝴蝶 @小蝴蝶 : 这个娱乐可以另外开一个页面,专门搞一些个性化的娱乐,比如以前做网站喜欢把鼠标改样式,喜欢加个嵌套分开页面,喜欢加些工具条听歌,喜欢把侧边的滚动给取消掉,喜欢各种各样的花样,呵呵 :)以前网页喜欢炫耀一点,后来渐渐的感觉简单才好,不过可以另外开一个页面整整花样,也算折腾代码的练习,呵呵。

        802室 二月 23, 2013 21:26:02
        • 小蝴蝶

          @郑永 恩恩,纯属娱乐的东西确实不需要搞太多,有空我单独开个这样的页面,然后把你钢琴搬进去哈哈哈

          803室 二月 23, 2013 21:36:36
  9. 9 楼 hostgator

    这样感觉很完善,支持了

    二月 23, 2013 13:45:41
  10. 10 楼 爱软E

    网站加载了不少js啊

    二月 24, 2013 19:07:15
  11. 11 楼 第三人称

    :ang: 我讨厌代码哈哈

    二月 25, 2013 15:54:46
  12. 12 楼 Arch!tect

    :guzhang: 围观~

    二月 25, 2013 16:31:13
  13. 13 楼 我的名字叫麒

    主题都带了

    二月 25, 2013 18:11:07
  14. 14 楼 公子

    看来我网速不错~~~ :eek:

    二月 25, 2013 18:15:53
  15. 15 楼 郑永

    上学了,记得常来哈。

    二月 25, 2013 20:49:54
  16. 16 楼 郑永

    还没休息啊,这页面怎么看不到了。。。

    二月 26, 2013 02:01:06
  17. 17 楼 xsinger

    好东西,mark一下~~

    三月 1, 2013 22:42:57
  18. 18 楼 ITGeeker

    不错,学习了。抄了这段红色的用了 。另外,博客折腾的很有个性的,赞一个!

    四月 7, 2013 22:22:30
  19. 19 楼 libra

    还是这个跳转底部好用。网上找的都不兼容firefox和chrome

    五月 19, 2014 09:10:53