Question

出于某种原因，在第二次点击菜单中的内部链接后，我的页面会“跳转”而不是平滑滚动。我很确定这与 scrolling.js 文件有关，我是jQuery的新手，可能搞砸了。既然你已经评论说它工作得很好就让我在例子中解释一下。我进入页面我可以在菜单中按“关于”按钮，它滚动得很好，我可以按“了解我”按钮，它也可以正常工作，转到侧面菜单上的顶部箭头也可以，但如果滚动手动一点，然后尝试在菜单中按“关于”，它不会滚动但跳转，即使您滚动回顶部并按照页面加载后的工作方式按下它。 the page itself

scrolling.js

$(window).scroll(function(){
var height = $('section').height();
height = height * 0.2;
if ($(window).scrollTop() >= height) {
$('nav').css('background','rgba(0,0,0,0)');
$('nav').css('margin-left','0px');
$('.OTOCWEL').css('background','rgba(0,0,0,0)');
$('#powered').css('background','rgba(0,0,0,0)').addClass('fixerpowered');
$('.menu').addClass('menuslim');
$('.menu').removeClass('menu');
$('.menuslim').css('margin-left','0px').css('opacity','1');
$('#first').addClass('mega-octicon octicon-info').css('margin-left','0px');
$('#second').addClass('mega-octicon octicon-book');
$('#third').addClass('mega-octicon octicon-mail');
$('#fourth').addClass('mega-octicon octicon-diff-added');
$('.OTOCWEL').css('display','none');
$('.suwak').css('display','none');
$('.dzolero').css('display','block');
} else  {
$('nav').css('background','rgba(0,0,0,0.5)');
$('.menuslim').addClass('menu');
$('.menu').removeClass('menuslim').css('top','0px');
$('#first').html("<a>About</a>").css('margin-    left','15px').removeClass('mega-octicon octicon-info');
$('#first>a').attr('href','#about');
$('#second').html("<a>Projects</a>").removeClass('mega-octicon octicon-book');
$('#second>a').attr('href','#projects');
$('#third').html("<a>Contact</a>").removeClass('mega-octicon octicon-mail');
$('#third>a').attr('href','#contact');
$('#fourth').html("<a>Additional</a>").removeClass('mega-octicon octicon-diff-added');
$('#fourth>a').attr('href','#additional');
$('.OTOCWEL').css('display','initial');
$('.suwak').css('display','block');
$('#powered').removeClass('fixerpowered');
$('.dzolero').css('display','none');
}
});

scroll.js

$('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
        }, 1000);
        return false;
    }
}

}）;

Answer 1

我怀疑你的JQuery选择器$('a[href*=#]:not([href=#])')是问题的根源。

当你的锚链接（那些没有重定向到新页面的链接）时，你应该使它们能够平滑滚动。

想一想，你的锚标签的 main purpose 是什么？它指的是文档地址。用户主要体验：

重定向到新网站。
浏览当前网站。
下载文件请求。

因此，只要您的平滑滚动行为特定于所有锚点;那么你不需要考虑特定的锚行为。为什么？因为您不关心锚重定向/下载，所以平滑滚动不应该触发，因为页面根本不移动。

TLDR ：

尝试从以下位置更改JQuery选择器：

$('a[href*=#]:not([href=#])').click(function() { //...

要：

$('a').click(function() { //...

对所有方案进行一些单元测试。如果这不能解决您的问题，那么我们需要确定其他JavaScript会影响您的平滑滚动。

Answer 2

感谢您的回答和想法的荣誉:)。我设法更改选择器，因此它影响所有锚链接，而不仅仅是内部链接，但它没有解决问题。我试图用另一个菜单部分测试它，但结果是一样的。它跳转到“项目”部分而不是平滑滚动。我还添加了带有锚点链接到“项目”部分的乐器按钮，看看它是否是滚动脚本的问题，但它就像一个魅力。在我看来这是菜单脚本（ scrolling.js ）的问题，而不是 scroll.js

编辑 scrolling.js 正在删除当菜单达到剖面高度的20％时的锚链接，然后当菜单变为垂直版时，它会重写它们。是否有可能 scroll.js 脚本失去了对链接的关注，因为它不会一直扫描文档？那么是否可以让脚本重新扫描文档？

EDIT2 ：我已设法通过从 scrolling.js

中删除 .html（）功能来解决此问题

jquery跳转而不是滚动

2 个答案: