最近在做webapp时有几个页面,都需要同一个效果:锚点跳转。我认为,在webapp中做锚点跳转,很别扭,网页中比较常见的方法,但是在手机端运用却不合适,那是那个SB的后台,非得让做成那效果。没办法,谁让人家是老员工了。
使用锚点跳转做的静态页面,没有一点问题,但是经过他加的php后,就不跳转了,坑爹的玩意!在调试过程中,找了好多的锚点跳转的方法,写在这里,一起分享:
//平滑移动到 想要的位置
$(function() {
var mao = $("#" + getParam("m")); //获得锚点
//判断对象是否存在
if (mao.length > 0) {
var pos = mao.offset().top;
var poshigh = mao.height();
$("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000);
}
});
//根据参数名获得该参数 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];
}
}
}
}
$("html,body").animate({scrollTop: $("#elementid").offset().top}, 1000); //它代表id为elementid的元素顶端到网页顶端(不是浏览器可视区域顶端)的绝对距离。 $("#elementid").offset().top; //扩展方法,流畅的滑动 demo: http://jsfiddle.net/9SDLw/
$(‘a‘).click(function(){ $(‘html, body‘).animate({ scrollTop: $( $.attr(this, ‘href‘) ).offset().top }, 500); return false; }); // 如果你的元素没有ID,你想用名字来做定位链接,可以使用这个: $(‘a‘).click(function(){ $(‘html, body‘).animate({ scrollTop: $(‘[name="‘ + $.attr(this, ‘href‘).substr(1) + ‘"]‘).offset().top }, 500); return false; }); // 为了增强性能,你应该将 $(‘html, body‘) 选择器缓存起来。这样每次点击时就不需要再重新查找了 var $root = $(‘html, body‘); $(‘a‘).click(function() { $root.animate({ scrollTop: $( $.attr(this, ‘href‘) ).offset().top }, 500); return false; }); // 如果你想更新当前页面的URL。在回调里稍微改一下就可以了: var $root = $(‘html, body‘); $(‘a‘).click(function() { var href = $.attr(this, ‘href‘); $root.animate({ scrollTop: $(href).offset().top }, 500, function () { window.location.hash = href; }); return false; });