當鏈接被點擊時，jquery防止ScrollTop

Question

嗨，大家好我在jquery scrollTop中遇到了一個問題，我的問題是在導航到id #linkA後單擊它，再次添加一個不需要的滾動條。我想在單擊鏈接後阻止滾動。讓我們假設這三個段落之間有很大的差距。

HTML：

<ul> 
    <li ><a href="#linkA"> Link A </a></li> 
    <li ><a href="#linkB"> Link B </a></li> 
    </ul> 

    <p id="#linkA">Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit 
anim id est laborum.</p> 

    <p id="#linkB">Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint 
occaecat cupidatat non proident, sunt 
in culpa qui officia deserunt mollit 
anim id est laborum.</p> 

的Jquery：

$(document).ready(function() { 

$('.a').click(function() { 
    $('body').animate({ 
     scrollTop: $("#linkA").offset().top 
    }, 500); 
    return false; 

}); 

$('.b').click(function() { 
    $('body').animate({ 
     scrollTop: $("#linkB").offset().top 
    }, 500); 
    return false; 
}); 
}); 

$(window).scroll(function() { 
    var windowTop = $(document).scrollTop(); 

    if (windowTop > 0 && windowTop <= 200) { 
     //i got some parallaxing code here 
    } 

}); 

或者你們都當鏈接被點擊任何想法如何阻止scrollTop的？謝謝。

Answer 1

當您第一次滾動時，元素的偏移量會發生變化。快速入侵將滾動到頁面的頂部，然後滾動到鏈接。事情是這樣的：

$('.a').click(function() { 
    $('body').animate({ scrollTop: 0 }, 0); 
    $('body').animate({ 
     scrollTop: $("#linkA").offset().top 
    }, 500); 
    return false; 

}); 

Answer 2

如果我跟着你正確，你可以使用data API在HTML5中，以防止隨後點擊。說

​​

Answer 3

如何檢查scrollTop值？此外，您正在複製相同的代碼。不是一個真正的大問題，但是如果你改變一個而不是另一個，會導致一些問題。

我會嘗試：

$('.a').click(ScrollToPos("linkA")); 
$('.b').click(ScrollToPos("linkB")); 

function ScrollToPos(link) { 
    // Current Scroll position of the window 
    // might also use body here 
    var currentTop = $(window).scrollTop(); 

    // The scrollTop value for the target link/paragraph 
    var linkTop = $("#" + link).scrollTop(); 

    if (currentTop != linkTop) { 
     $('body').animate({ 
      scrollTop: $("#" + link).offset().top; 
     }, 500); 
    } 
} 

這並沒有經過測試。只是一個想法，你應該試試看看你是否可以檢查滾動位置。另外，我想你會想要檢查一個範圍或某個閾值。例如：用戶點擊linkA並將scrollTop設置爲25.如果用戶再次單擊，則當前窗口的scrollTop和頂部的段落實際上是相同的。但是，如果用戶滾動鼠標滾輪或箭頭點擊，該怎麼辦。該窗口的scrollTop現在可能是26.這顯然使得2個位置不匹配，但用戶有點在該部分。你應該考慮一個門檻。就好像如果窗口的scrollTop和段落的scrollTop在一個數字的範圍內，那麼它們匹配。