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跳轉而不是滾動

回答

相關問題