欢迎访问淘淘IT!QQ:505342486

jQuery锚点,从一个页面跳转到另一个页面的锚点(带平滑移动的效果)

时间:2020-06-29 12:06:47    来源:网络    浏览:27

从一个页面跳转到另一个页面的指定位置 如果不带平滑移动的效果 很容易 加个 锚点就行了  比如 想跳到 mao.aspx 的页面 的div id="s" 的位置    那么   只用<a href="mao.aspx#s">  就可实现跳转到指定位置。

现在为了增加用户体验,跳转到页面后,平滑移动到该位置,怎么做呢,其实也很简单啦,那边传递过来一个 要跳转到哪个div的参数就行

如:<a href="mao.aspx?mao=abc">

先上一段 页面获取参数的 通用js

 //根据参数名获得该参数  pname等于想要的参数名
function getParam(pname) {	
	var params = location.search.substr(1); //  获取参数 平且去掉?
	var ArrParam = params.split('&');
	if (ArrParam.length == 1) {
 //只有一个参数的情况
		return params.split('=')[1];
	}
	else {
		//多个参数参数的情况
		for (var i = 0; i < ArrParam.length; i++) {
			if (ArrParam[i].split('=')[0] == pname) {
				return ArrParam[i].split('=')[1];
			}
		}
	}
}
代码很简单 就是根据当前url 获取其中想要的参数的值

var mao = $("#" + getParam("mao")); //获得锚点
	if (mao.length > 0) {//判断对象是否存在
		var pos = mao.offset().top;
		var poshigh = mao.height();
		$("html,body").animate({ scrollTop: pos-poshigh-180 }, 800);
	}
上面就是平滑移动到 想要的位置     pos-poshigh-30 这个是可以调整的 我是觉得减到30毕竟好

在thinkphp里面用,参数不能用m,所以改成了mao



来源网址:https://blog.csdn.net/irelands/article/details/7083347

有帮助
(0)
0%
没帮助
(0)
0%
标签: jQuery  锚点  

网友评论

网友评论文明上网理性发言
昵称:

全部评论0条)

o(╯□╰)o 暂无评论,我要抢沙发。
栏目列表
点击排行
more