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