Smooth Scrolling с <a href='#'>

Question

As per this question, я использовал следующий код:

$("a.smooth-scroll").click(function(e) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 1000); 
    }); 

Мой HTML выглядит следующим образом:

<a href="#product-list" class="btn btn-default smooth-scroll"><span class="fa fa-list-ul"></span>Full Product List</a> 

И по соответствующей ссылке:

<a name="product-list"></a> 

Но я получаю javascript error: shop.js:8 Uncaught TypeError: Cannot read property 'top' of undefined

Почему это?

Answer 1

$.attr(this, 'href') (альтернативно, $(this).attr('href')) для вашей ссылки вернет строку #product-list.

При запуске $('#product-list') он ищет элементы с идентификатором из product-list, который в данном случае не возвращает никаких элементов. Попытка получить offset() пустого набора возвращает undefined. Вы не можете получить доступ к свойствам undefined, поэтому ваш код не работает.

С другой стороны, я бы рассмотреть вопрос об использовании решения, как та, что здесь - https://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 2

Это не решение существующего кода. Но, может быть, вы можете использовать свой рабочий скрипт:

$(".scroll").click(function(event){ 
     event.preventDefault(); 
     //calculate destination place 
     var dest=0; 
     if($(this.hash).offset().top > $(document).height()-$(window).height()){ 
       dest=$(document).height()-$(window).height(); 
     }else{ 
       dest=$(this.hash).offset().top; 
     } 
     //go to destination 
     $('html,body').animate({scrollTop:dest}, 1000,'swing'); 
    }); 

Вы должны добавить class="scroll" на <a href="#product-list">. Проверьте скрипку: http://jsfiddle.net/YtJcL/1409/