JQuery гладкой прокрутки на одной хэш-привязки, чтобы получить сверху

Question

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

$('a[href*=#]').on('click',function(event){ 
//event.preventDefault(); // nope 
$('html,body').animate({scrollTop:$(this.hash).offset().top},500); 
}); 

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

<a href="#section1">smooth scroll</a> 

исключением случаев, когда один хэш нажата, чтобы вернуться на вершину, как:

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

в этом случае я вижу в верхней части страницы, но без гладкий эффект прокрутки ..

Я знаю, что если связь называют идентификатор первого элемента на странице все работы, просто интересно, если есть способ, чтобы использовать единственный хэш ровно на приборах типа СПИРАЛЬНЫЙ верхней

Answer 1

Вы можете добавить класс к ссылке .gototop, и это сработает. Вы добавите от 0 до scrollTop и он будет идти к началу страницы :)

$('.gototop').on('click', function (event) { 
    event.preventDefault(); 
    $('html,body').animate({ 
     scrollTop: 0 
    }, 500); 
}); 

Вы код не работает, потому что, если после того, как хэш не добавить идентификатор элемента, который он не получит смещение элемента. $ (this.hash) совпадает с $ ("# div") и выберет элемент с идентификатором div, и потому что вы ничего не даете после #, он не получит элемент для поиска смещения, и это вызывает ошибка. Если вы проверяете консоль будет показывать это:

Uncaught TypeError: Не удается прочитать свойство «сверху» неопределенных :)

Answer 2

Я хотел бы предложить, чтобы добавить якорь данных якорь смещения = «30» в разделы и проверить anchor.To ваш случай defaultAnchorOffset будет used.Take рабочая демо здесь: http://jsfiddle.net/v4tzngmr/

$('a[href*=#]').on('click',function(event){ 
    event.preventDefault(); 
    var defaultAnchorOffset = 0; 
    var $anchor = $('#' + this.hash.substring(1)); 
    var anchorOffset = $anchor.data('anchor-offset'); 

    if (!anchorOffset) // for when anchor doesn't have the offset attribute like Section 4 
    anchorOffset = defaultAnchorOffset; 
    var offset = $anchor.offset() === undefined ? 0 : $anchor.offset().top; 
    $('html,body').animate({ 
     scrollTop: offset - anchorOffset 
    }, 500); 
}); 

Answer 3

Ответ Гианниса Гривасом связан с несколькими другими решениями от StackOverflow

Nota bene: Я полный манекен для JQuery. Я просто подключил несколько решений, и он работает!

HTML:

<a href="#section1">smooth scroll</a> 
<a href="#">home</a> 

Jquery:

$(function() { 
     $('a[href*="#"]').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {      
       var defaultAnchorOffset = 0; 
       var $anchor = $('#' + this.hash.substring(1)); 
       var anchorOffset = $anchor.data('anchor-offset'); 

       var href = $.attr(this, 'href');      

       if (!anchorOffset) 
        anchorOffset = defaultAnchorOffset; 
       var offset = $anchor.offset() === undefined ? 0 : $anchor.offset().top; 

       $('html, body').animate({ 
        scrollTop: offset - anchorOffset 
        }, 500, 
        function() { 
         window.location.hash = href; 
        } 
       ); 
       return false; 
      } 
     }); 
    });