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错误： shop.js:8 Uncaught TypeError: Cannot read property 'top' of undefined

为什么会这样？

Answer 1

您链接的

$.attr(this, 'href')（或$(this).attr('href')）将返回字符串#product-list。

运行$('#product-list')时会查找{strong> id 为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/

使用<a href="#">

2 个答案: