Question

我有一个从w3schools.com获得的jQuery代码，其中ON CLICK（单击<a href="#id"></a>）更改了URL的#id，并且还允许平滑滚动到特定的DIV部分。但它不适用于滚动。我希望滚动效果相同。当我向下或向上滚动到特定部分时，URL的#id应该改变。

当前的jQuery代码：

$(document).ready(function(){
  $("#navlist a").on('click', function(event) {
    if(this.hash !== ""){
      var hash = this.hash;
        $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;                
      });
    }
  });
});

我搜索了stackoverflow，我得到了类似的东西：

$(document).bind('scroll',function(e){
    $('div').each(function(){
        if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){
            window.location.hash = $(this).attr('id');
        }
    });
});

这似乎有效，但当我放置两个代码时，其中一个代码正在停止执行另一个代码。我想把两个代码组合成一个来实现onclick和scroll效果但是我无法这样做（对jquery的弱手）。

ID为http://localhost/sites/fh/index.php#first

的网址示例

请帮助我开发。

Answer 1

您应该更改历史记录状态，而不是设置位置哈希值。这样您就可以避免浏览器强制页面滚动。请查看以下内容：

navlist = [];
$("#navlist a").each(function(i) {
    var thisLink = $(this);
    var thisId = thisLink.attr('href');
    var thisTarget = $(thisId);
    navlist.push({
        'anchor': thisLink,
        'id': thisId,
        'target': thisTarget
    });
    thisLink.on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: thisTarget.offset().top
        }, 800);
    });
});
$(window).on('scroll resize', function(e) {
    $.each(navlist, function(e, elem) {
        var placement = elem.target[0].getBoundingClientRect();
        if( placement.top<window.innerHeight && placement.bottom>0 ) {
            history.pushState({}, '', elem.id);
            console.log('Hash: ' + elem.id);
            return false; /* Exit $.each loop */
        };
    });
});

nav a {
    display: block;
}
section {
    height: 600px;
    border-top: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navlist">
    <a href="#s1">Go to Section 1</a>
    <a href="#s2">Go to Section 2</a>
    <a href="#s3">Go to Section 3</a>
</nav>
<section id="s1">Section 1 Content</section>
<section id="s2">Section 2 Content</section>
<section id="s3">Section 3 Content</section>

同样在JSFiddle。

请注意，如果您使用的是Foundation框架，那么您已经拥有Magellan。对于Bootstrap，它被称为ScrollSpy。

修改现有的jQuery以更改Scroll上的URL

1 个答案: