jquery scrollTop и href = "#"

Question

Я использую эту функцию для прокрутки до нужного контейнера:

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop+'px'}, delay);
    return true;
}

Проблема возникает, когда используется так:

<a href="#" onclick="scrolear('#container');">go</a>

Поскольку href="#" делает тело для прокруткик началу страницы.

Есть ли способ предотвратить это?

Answer 1

Обновление

Подумайте об использовании javascript для постепенного улучшения вашего сайта, а не полагайтесь на него для правильной работы сайта. В вашем примере это может быть достигнуто следующим:

HTML:

<a href="#container">go</a>

Javascript:

$(function() {
  $('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    var stop = $(target).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop + 'px'}, delay);
  });
});

Это будет перехватывать клики по всем ссылкам, где href начинается с #, и добавлять анимацию для вас. Если у пользователя не был включен JavaScript, нажатие на ссылку все равно приведет его в правильное место.

Надеюсь, это поможет!

Answer 2

<a href="javascript:void(0);" onclick="scrolear('#container');">go</a>

Это просто назначит функцию javascript для href, которая вообще ничего не будет делать, поэтому прокрутка страницы не происходит, как с #

Answer 3

, так как вы используете jquery, я бы сделал

<a href="#">go</a>

$("a").click(function() {
    e.preventDefault(); // cancel's the '#' click event
    scrolear('#container');
});

Answer 4

исправленный ответ от @ rich.okelly

function scrollTosec(){
     $('a[href^="#"]').click(function(e) {
            e.preventDefault();
            var target = $(this).attr('href');
            var stop = $(target).offset().top;
            var delay = 200;
            $('body').animate({scrollTop: stop + 'px'}, delay);
          });
}