实现”跳转底部”按钮渐隐的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;}
49 Comments

Name *

E-mail *

Website

  1. 第三人称

    :ang: 我讨厌代码哈哈

    • 小蝴蝶

      我爱代码…哈哈

  2. Arch!tect

    :guzhang: 围观~

  3. 我的名字叫麒

    主题都带了

  4. 公子

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

  5. 郑永

    上学了,记得常来哈。

    • 小蝴蝶

      唉,才坐稳,忙得团团转

      • 郑永

        @小蝴蝶 : 稳下就好

        • 小蝴蝶

          坐稳之后打开电脑还要先查课表,然后选课..

          • 郑永

            @小蝴蝶 : 好好专心学习,像大师级前进。

            • 小蝴蝶

              用家里大电脑惯了,乍一用笔记本,感觉世界渺小了好多,字都看不清了..

  6. 郑永

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

  7. xsinger

    好东西,mark一下~~

  8. ITGeeker

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

  9. libra

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