jQuery回到页面顶部滚动代码

2013-11-03 16:23:23

[网页设计 | Web Design] , ,

这个是一个基于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,需要注意的是,要适应手机的屏幕尺寸,这个 数值应该比较小

这篇博文发表在 网页设计 | Web Design 目录下,标签为 , ,
如需引用,请使用链接:https://note.mc256.dev/?p=4

This article published in 网页设计 | Web Design with tags , , .
Cite this page using this link:https://note.mc256.dev/?p=4

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

正在提交评论... Submitting ...
正在为您准备评论控件 Loading Comment Plugin
Copyright © 2013-2023 mc256. All Rights Reserved.
Powered by WordPress on top of a dual-stack k3s Cluster using JuiceFS.
Wordpress Theme Designed By mc256.
Encrypted By Let's Encrypt.  Hosted On Linode + OVH + AWS.
DNS Provided By Hostker.
Status Page by CloudFlare Worker.