jQuery scrollTop 不适用于查询字符串链接

Question

我有一个导航，初始网址如下所示:

test.php?query=19

我的页面上有像这样的链接 <a href="#section-1">Section 1</a><a href="#section-2">Section 2</a><a href="#section-3">Section 3</a>

分为 3 个部分:

<section id="section-1"></section><section id="section-2"></section><section id="section-3"></section>

并且我正在使用此 jquery 代码从页面顶部(或用户在页面上的位置)滚动到该部分到该部分的顶部，并且不显示 #我的网址中的标记。

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 2000);
                return false;
            }
        }
    });
});

我的问题是这不会滚动到该部分。它只是转到该部分的底部，然后滚动到顶部和 #出现在我的网址中。

我的主页上有另一个菜单:

home.php我正在使用完全相同的 jquery 代码，它可以在该页面上运行。

我的问题是如何让 ScrollTop 在我的 test.php?query=19 中工作页面就像 home.php 上的那样当我点击 test.php?query=19 上的“赞”时我的网址更改为:test.php?query=19#section-1

Answer 1

1. 使用 e.preventDefault(); 阻止您的代码在当前 url 中添加 # >

您还可以使用此代码滚动到任何页面上的特定部分:

HTML:

<div  id = 'a' style = 'height:300px;'>
123
</div>
<a href= '#b'>Go to 456 </a>

<div id = 'b' style = 'height:300px;' >
456
</div>
<a href= '#c'>Go to 789 </a>

<div id = 'c'style = 'height:300px;' >
789
</div>
<a href= '#d'>Go to asd </a>

<div id = 'd' style = 'height:300px;' >
asd
</div>
<a href= '#e'>Go to fgh </a>

<div  id = 'e'  style = 'height:300px;' >
fgh
</div>
<a href= '#a'>Go to 123 </a>

脚本:

function scroll(id){
    $('html, body').animate({
        scrollTop: $(id).offset().top
    }, 2000);
}
$(document).ready(function() {
    $('a[href*=#]:not([href=#])').click(function (e) {
        var id = $(this).attr('href')
        scroll(id);
        e.preventDefault();
    });
});

演示: http://jsfiddle.net/ishandemon/k19p33tm/

http://jsfiddle.net/ishandemon/k19p33tm/1/