JQuery, предотвращающий прокрутку при нажатии ссылки

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, чтобы предотвратить последующие клики. Скажите

$('.a').click(function() { 
    if (!$(this).data('clicked')) { 
     $('body').animate({ 
      scrollTop: $("#linkA").offset().top 
     }, 500); 
    } else { 
     $(this).data('clicked', true); 
    } 
    return false; 
}); 

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 абзаца находятся в диапазоне числа, то они совпадают.