滚动到指定位置 scroll()_scroll 指定位置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40930251/article/details/105008462

本文详细讲解如何利用JavaScript的scroll()方法，精确控制网页滚动到指定的元素位置，实现平滑滚动效果，适用于创建交互式用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里是引用

<div class="con">

	<div class="top">
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	 　　　　上部分内容<br>
	</div>
	
	<div class="guding"> 到指定位置固定</div>
	
	<div class="bottom">
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
 　　　　	下部分内容<br>
	</div>
	
</div>
<button type="button">点击滚动条到最底部</button>

.con{
	height: 300px;
	width: 500px;
	background: #00528C;
	overflow: scroll;
	position: relative;
}
.guding{
	background: green;
	text-align: center;
	color: #fff;
	height: 40px;
	width: 100%;
	line-height: 40px;
}

.qq{
	position: fixed;
	margin-top: -189px;
	width: 500px;
}

<script>
	 $(function(){
		 
// ----------------------	滚动到指定位置后固定   --------------------
		
		var topHeight = $('.top').outerHeight()   //获取上面元素的高度
		
 　　　　$('.con').scroll(function(){
	 
			var  win_top=$(this).scrollTop();  // 需要固定的导航，向上移动的距离
			console.log(win_top)
			
			if(win_top >= topHeight){
				$('.guding').addClass("qq")
			}
			if(win_top< topHeight){
				$('.guding').removeClass("qq")
			}
 
 　　　　})
 
// ----------------------	滚动条到最底部  ---------------------------
 
		// function top1(){
		//     $('.con').scrollTop($('.con')[0].scrollHeight);
		// };
		
		$('button').click(function(){
			
			$('.con').scrollTop($('.con')[0].scrollHeight);
			
		})
			
	 })
 
</script>