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

最新推荐文章于 2024-06-11 15:23:22 发布

自带

最新推荐文章于 2024-06-11 15:23:22 发布

阅读量1.5k

点赞数 2

文章标签： html js web

本文链接：https://blog.csdn.net/qq_33281259/article/details/117016858

版权

<!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>

自带

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquery 控制滚动条实现自动滚动浏览

<!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;}</
复制链接

扫一扫