jquery跳转而不是滚动

-3

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

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; 
    } 
}

}）;

来源

2015-12-14 pawcza

我没有看到任何跳跃....即时通讯使用Chrome去掉的.html（）功能来修复它！ – AdamJeffers

我也没有看到任何跳跃。 Chrome 48！ –

奇怪，我也使用Chrome。如果您手动滚动页面一点，然后按下“关于”按钮，您会看到跳跃吗？ – pawcza

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

当谈到你的锚链接（那些不重定向到一个新的页面），你应该这样做，使他们都能够平滑滚动。

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

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

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

TLDR：

尝试从改变你的jQuery选择：

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

要：

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

做所有情景的一些单元测试。如果这不能解决您的问题，那么我们需要确定哪些JavaScript影响您的平滑滚动。

来源

2015-12-14 20:32:00 AGE

感谢您的答案和想法的赞誉:)。我设法改变选择器，所以它影响所有的锚链接，不仅仅是内部链接，但它没有解决问题。我试图用另一个菜单部分来测试它，结果是一样的。它跳到“项目”部分，而不是平滑滚动。我还添加了带有链接到“项目”部分的锚链接的工具按钮，以查看滚动脚本是否存在问题，但它的工作原理类似于魅力。在我看来，这是菜单脚本（** scrolling.js **）的问题，而不是** scroll.js ** – pawcza

@pawcza这是有道理的，因为你没有偏离什么scrolling.js试图做什么。至少回答你自己的有效性问题 – AGE

感谢您的答案和想法:)。我设法改变了选择器，因此它影响了所有的锚链接，而不仅仅是内部链接，但它没有解决问题。我试图用另一个菜单部分来测试它，结果是一样的。它跳到“项目”部分，而不是平滑滚动。我还添加了带有链接到“项目”部分的锚链接的工具按钮，以查看滚动脚本是否存在问题，但它的工作原理类似于魅力。在我看来，这是菜单脚本的问题（滚动。JS），而然后用scroll.js

编辑：的scrolling.js被删除锚链接时，菜单达到截面高度的20％，则作为菜单去竖版其重写他们。因为它不会始终扫描文档，因此可能是因为脚本链接失去对链接的关注吗？那么是否有可能使脚本重新扫描文档？

EDIT2：我已经成功从scrolling.js

来源

2015-12-14 21:14:19 pawcza

jquery跳转而不是滚动

回答

相关问题