jQuery回到页面顶部滚动代码

2013-11-03 16:23:23

[网页设计] , ,

 

这个是一个基于jQuery 的页面平滑向上滚动的代码,常常用于"回到顶部" "Back To Top"之类的页面摁钮.

本站也是采用了这个脚本.

 

var pxShow = 300;
var fadeInTime = 400;
var fadeOutTime = 400;
var scrollSpeed = 1000;

jQuery(window).scroll(function(){
	if(jQuery(window).scrollTop() >= pxShow){
		jQuery("#back-to-top").fadeIn(fadeInTime);
	}else{
		jQuery("#back-to-top").fadeOut(fadeOutTime);
	}
});

jQuery(document).ready(function(){
	jQuery('#back-to-top a').click(function(){
		jQuery('html, body').animate({scrollTop:0}, scrollSpeed); 
		return false; 
	}); 		
});

需要注意的是,该按钮的DIV 应该是,需要将它设置为隐藏

#back-to-top{
	display: none;
}

而pxShow 则是规定了该按钮出现时候,页面究竟下滑了多少px,需要注意的是,要适应手机的屏幕尺寸,这个 数值应该比较小

这篇博文发表在 网页设计 目录下,标签为 , ,
版权所有,请勿转载。如需引用,请使用链接:https://note.masterchan.me/?p=4
 

您的邮箱地址不会被公开,评论使用Gravatar头像。
Your email address will not be published. This blog is using Gravatar.

正在提交评论...
正在为您准备评论控件