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上的相似内容时，我的网址会更改为：{ {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>

<强> SCRIPT：

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/

Answer 2

我会改变您处理代码的逻辑。防止默认事件并通过attr。

直接访问href

这样的事情：

$(function() {
    $('a[href*=#]:not([href=#])').on('click', function(e) {
        e.preventDefault();
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this).attr('href');
            if ($target.size()) {
                $('html,body').animate({
                    scrollTop: $target.offset().top
                }, 2000);
            }
        }
    });
});

顺便说一句，我不确定您是否正在使用a[href*=#]:not([href=#])来理解选择器。此外，条件（if location.pathnae.blah...）似乎很尴尬。我会做这样的事情：

$(function() {
    $('#some-wrapper').on('click', 'a.scroll-to', function(e) {
        e.preventDefault();
        var $target = $(this).attr('href');
        if ($target.size()) {
            $('html,body').animate({
                scrollTop: $target.offset().top
            }, 2000);
        }
    });
});

jQuery scrollTop无法使用查询字符串链接

2 个答案: