jquery实现描点平滑定位

jquery实现描点平滑定位

1. 方法

// 定义描点位置
var pos = $("#limit_top").offset().top;

// 实现平滑移动 1000ms代表时间
$("html,body").animate({scrollTop: pos}, 1000);

2.使用案例：从二级页面，跳转到一级页面指定的位置。

上图是一级页面中的九个模块,点击对应的模块能进入对应的九个二级页面,因为一级页面有多个,所以添加了一个参数flag区分是哪个一级页面.参数area记录的是一级页面中的哪个模块.id是记录的位置,相当于描的点,跳转的时候根据这个id定位.

<script type="text/javascript">
		//获取请求参数
		function getURLParameter(name) {
	    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
		}

		$(function(){
			// 定义将要去的描点位置
			var area = getURLParameter('area');
			if(area == '1'){
				var area = $("#area1").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '2'){
				var area = $("#area2").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '3'){
				var area = $("#area3").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '4'){
				var area = $("#area4").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '5'){
				var area = $("#area5").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '6'){
				var area = $("#area6").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '7'){
				var area = $("#area7").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '8'){
				var area = $("#area8").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}else if (area == '9'){
				var area = $("#area9").offset().top;
				$("html,body").animate({scrollTop: area}, 500);
			}
		});
	</script>

一级页面中的js代码,根据getURLParameter(name) 方法获取请求参数.也就是要去的描点位置.把参数中的#limit_top 修改为你要跳到的描点位置标识,例如上图中的area1-area9,$(“html,body”).下面的一行代码代表的是滑动的时间,1000毫秒就是一秒.animate({scrollTop: pos}, 1000);

3.点击二级页面中的返回按钮,返回一级页面中点击的模块位置.

上图中圈住的是返回按钮,

调用返回的方法,根据参数flag判断是从哪个页面点进来的,要返回到哪个页面.area是页面中的某个位置.也就是一级页面中的id.

从二级页面可以去到其他的二级页面,为了避免,在其他二级页面,不知道回到哪个一级页面,所以要带上参数flag和area.

4.案例中的一级页面

二级页面

或者参考下面内容实现