jQuery学习:回到页面顶部 scrollTop的学习

最新推荐文章于 2023-08-10 17:49:37 发布

¡Venceremo

最新推荐文章于 2023-08-10 17:49:37 发布

阅读量308

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127805431

版权

JavaScript DOM操作滚动效果页面定位前端开发

关键词由CSDN通过智能技术生成

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

			#to_top {
				width: 30px;
				height: 40px;
				font: 14px/20px arial;
				text-align: center;
				background-color: #06c;
				position: fixed;
			/* 	光标呈现为指示链接的指针（一只手） */
				cursor: pointer;
			/* 文本颜色 */
				color: #fff;
				left: 1250px;
				top: 500px;

			}

瞬间滚动

		$('#to_top').click(function(){
				//瞬间滚动
				$('html,body').scrollTop(0);
			})

缓慢回到顶部

		$('#to_top').click(function() {
				//平滑滚动到顶部的距离
				//总距离 ,的写法只能用于设置
				var distance = $('html').scrollTop() + $('body').scrollTop();;
				//总时间
				var time = 500; //ms
				//间隔时间
				var intervalTime = 10;
				//每次移动的距离
				var itemDistance = distance / (time / intervalTime);
				//使用循环定时器不断滚动
				var intervalId = setInterval(function() {

					distance -= itemDistance;
					if (distance <= 0) {
						distance = 0; //修正 关闭
						clearInterval(intervalId);
					}
					$('html,body').scrollTop(distance);

				}, intervalTime);


			})