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

Posted 2020-10-05 礼拜16

最近在做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;
});