锚点定位跳转的各种实现方法

最近在做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;
});
原文地址:https://www.cnblogs.com/baiyygynui/p/7476098.html