Javascript 修改现有jQuery以更改滚动上的URL

我有一个从w3schools.com获得的jQuery代码，点击（点击

）可以更改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');
        }
    });
});

$（文档）.bind（'scroll'，函数（e）{
$（'div'）。每个（函数（）{
如果（$（this.offset（）.topwindow.pageYOffset+10）{
window.location.hash=$（this.attr（'id'）；
}
});
});

这似乎可行，但当我放置两个代码时，其中一个正在阻止另一个执行。我曾想过将这两个代码合并为一个代码，以实现onclick和scroll效果，但我无法做到这一点（jquery的手还很弱）

ID为的URL示例：

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

---

请帮助我开发人员。

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

navlist=[]；
$（“#导航列表a”）。每个（功能（i）{
var thisLink=$（此）；
var thisId=thisLink.attr（'href'）；
var thisTarget=$（thisId）；
navlist.push({
“锚”：此链接，
“id”：thisId，
“目标”：此目标
});
此链接。在（'click'，函数（e）{
e、 预防默认值（）；
$（'html，body'）。设置动画({
scrollTop:thisTarget.offset（）.top
}, 800);
});
});
$（窗口）。打开（'滚动调整大小'，函数（e）{
$。每个（导航列表、功能（e、元素）{
var placement=elem.target[0]。getBoundingClientRect（）；
如果（placement.top0）{
history.pushState（{}，，，elem.id）；
log（'Hash:'+elem.id）；
返回false；/*退出$。每个循环*/
};
});
});
nava{
显示：块；
}
部分{
高度：600px；
边框顶部：1件纯黑；
}

第一节内容
第2节内容
第3节内容
您的示例url是localhost（没有人可以访问它）示例url不供您访问。。这只是为了让你知道，
#first
是我想在单击和滚动时更改的内容@dommmm@MagnusEriksson完成：）您是否使用了此代码的JSFIDLE/链接？您可能应该使用.on（）而不是.bind（）完美。。如果我想在每个卷轴上将导航的字体颜色更改为白色？这将是一个很大的帮助。在控制台中，我从来没有读过
Hash:#s3
，而只读过
Hash:#s1
和
Hash:#s2
，所以显然，您永远不会按下第3节的状态，您必须调整浏览器的大小，并以第3节开始位置在视口上方的方式向下滚动。