jQuery控制页面按顺序滚动至指定位置

2024-09-05 12:17:59

字体：大中小

来源：转载

供稿：网友

jQuery控制页面按顺序滚动至指定位置，与滚动条的功能是不一样的，本代码中，当点击标号1的时候，页面会滚动至标号2，当点击标号2，会滚动至标号3，当标号3会回到标号1，也就是循环滚动，有意思吧，这当然比浏览器自带的滚动条有意思哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery控制页面滚动</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" /> <style>html, body {	margin: 0;	padding: 0;	height: 100%;	width: 100%;}html, body, input {	font-family: Helvetica, Arial, Sans-Serif;	font-size: 16px;}div.slide {	width: 100%;	height: 100%;	overflow: hidden;}div.slide h1 {	margin: 0;	padding: 0.5em;}div.slide ul {	list-style: none;	margin: 0;	padding: 0;}div.slide li {	margin: 0.5em;	padding: 0 0.5em;	line-height: 1.25em;}</style><script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script><script>	$(function(){	   //判断是否有DOCTYPE声明，有与没有，scrollTop不一样	    var scrollPos; 		if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { 			scrollPos = document.documentElement; 		} 		else if (typeof document.body != 'undefined') { 			scrollPos = document.body; 		}        //给标题添加单击事件		$("h1").click(function(){			var nextH1 = $(this).parent().next();			if ( nextH1.length ) { //判断是否是最后一个				var next_top = nextH1.offset().top;				$(scrollPos)					.animate({ scrollTop : next_top }, "slow");			}else{				var first_top = $("div.slide:first").offset().top;				$(scrollPos)					.animate({ scrollTop : first_top }, "slow");			}		});	});</script></head><body><div class="slide"><h1>标号One</h1><ul>	<li>OneOneOneOne</li>	<li>OneOneOneOne</li>	<li>OneOneOneOne</li></ul></div><div class="slide"><h1>标号Two</h1><ul>	<li>TwoTwoTwo</li>	<li>TwoTwoTwo</li>	<li>TwoTwoTwo</li></ul><div style="width:468px; margin:15px auto;"></div></div><div class="slide"><h1>标号Three</h1><ul>	<li>ThreeThreeThree.</li>	<li>ThreeThreeThree.</li>	<li>ThreeThreeThree.</li></ul></div></body></html>

上一篇：自写的Js网页拖动类

下一篇：CSS配合htc文件巧妙应用实现反转按钮

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注