如何根据URL条件滚动到锚点？

Question

我在底部有一些内容和分页的页面，如下图所示。

如果访问者访问第二页，第三页等，我想要做的是（平滑）滚动到锚链接。（例如www.example.com/list?page=2）

我想用URL条件执行此操作：检查网址是否为＆＃34; page＆＃34;字符串然后滚动到锚点但它没有工作。

<script>
    $(document).ready(function () {
        var url = window.location.href;
        if(url.indexOf("page") > -1) {
            scrollTop( $("#anchor-link").offset().top );
        }
    });
</script>

我想知道，如果使用这样的方法（检查 URL条件与JS和滚动）或附加每个分页链接与#anchor-link更好（性能，跨浏览器等）和如何我能这样做吗？

Answer 1

假设您有一个页面包含名为mysection1，mysection2的部分或页面，...

您可以使用函数

获取GET参数page

function findGetParameter(parameterName) {
var result = null,
    tmp = [];
location.search
.substr(1)
    .split("&")
    .forEach(function (item) {
    tmp = item.split("=");
    if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}

然后，使用

滚动到特定部分

$(document).ready(function() {
    $('html, body').animate({
        scrollTop: $( '#mysection' + page ).offset().top
    }, 500);
});

<强>样本

var page = findGetParameter('page');

if(page == undefined)
{
   alert('No page');
   page = 1;
}

$(document).ready(function() {
        $('html, body').animate({
            scrollTop: $( '#mysection' + page ).offset().top
        }, 500);
});



function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
    .substr(1)
        .split("&")
        .forEach(function (item) {
        tmp = item.split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    });
    return result;
}

body { background-color: #000; color: #fff; }
a { color: aqua; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 1500px;"></div>

<div id="mysection1">Page 1</div>


<div style="height: 1500px;"></div>
    


<div id="mysection2">Page 2</div>

<div style="height: 1500px;"></div>


<div id="mysection3">Page 3</div>

<div style="height: 1500px;"></div>


<div id="mysection4">Page 4</div>

<div style="height: 1500px;"></div>