jquery 控制滚动条 实现自动滚动浏览

发布时间：2024-01-09 15:22:17
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="{$p_tpl}/js/jquery-3.5.1.js" charset="utf-8"></script>
<style>
.kj{
	height:70px;
	width:25%;
	float:left;
	color:#fff;
	font-size:40px;
}
</style>
</head>


<body>
	<?php
		$arr=['red','blue','green','yellow','gray','black'];
	?>
	
    <for start='0' end='200' comparison="lt" step="1" name="i">
		
		<div class="kj" data-cc="{$i}" style="background-color:{$arr[$i%6]}">{$i}</div>
	
	</for>
</body>
<script>
	var zd_height=200;
	setInterval(function(){
		scroll_auto();
	},5000);
	function scroll_auto(){
		var gdt_height  =$(window).scrollTop();//当前滚动条高度
		var kj_height   = $(window).height();//浏览器可见区域高度
		var body_height = $(document).height();//body实际高度
		if(gdt_height + kj_height < body_height){
			//滚动条高度加可见高度没超出实际高度--往下滚动指定高度
			$("html,body").animate({scrollTop:gdt_height + zd_height}, 500);
		}else if(gdt_height + kj_height > body_height){
			//滚动条高度加可见高度超出实际高度--拉到底部
			$("html,body").animate({scrollTop:body_height - kj_height}, 500);
		}else{
			//滚动条高度加可见高度等于实际高度--回到顶部
			$("html,body").animate({scrollTop:"0px"}, zd_height);
		}
	}
</script>
</html>
文章来源:https://blog.csdn.net/qq_33281259/article/details/117016858
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章