jQuery超简单实现返回顶部滑动效果

设计思路:

    1、添加滚动事件

    2、获取当前窗口滚动高度,判断是否达到了指定高度以上

    3、若大于,表明用户下滚,图标显示;若小于,表明用户上滚,图标隐藏

    4、为图标添加点击事件,使用animate动画效果设置滚动高度调回0时所需的时间。


$(document).ready(function(){
				
	//为当前窗口添加滚动条滚动事件(适用于所有可滚动的元素和 window 对象(浏览器窗口))
	$(window).scroll(function(){
		 //创建一个变量存储当前窗口下移的高度
		var scroTop = $(window).scrollTop();
		//判断当前窗口滚动高度
		//如果大于100,则显示顶部元素,否则隐藏顶部元素
		if(scroTop>100){
			$('.return_top').fadeIn(500);
		}else{
			$('.return_top').fadeOut(500);
		}
	);
		    	
	//为返回顶部元素添加点击事件
	$('.return_top').click(function(){
		//将当前窗口的内容区滚动高度改为0,即顶部
		$("html,body").animate({scrollTop:0},"fast");
	});
});

猜你喜欢

转载自blog.csdn.net/rao_limon/article/details/80210968