平滑滾動與<a href='#'>

As per this question，我用下面的代碼：平滑滾動與<a href='#'>

$("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

這是爲什麼？

來源

2016-03-23 Chud37

好像你應該改變'$ .attr（這一點， 'HREF'）''到$（本）.attr（ 'href' 屬性）'第一 – teran

$.attr(this, 'href')（或者，$(this).attr('href')）爲您的鏈接將返回字符串#product-list。

當運行$('#product-list')它看起來與ID的product-list，在這種情況下不返回任何元素的元素。試圖獲得空集的offset()返回undefined。您無法訪問undefined的屬性，這就是您的代碼無法正常工作的原因。

或者，我會考慮使用像在這裏找到了一個解決方案 - https://css-tricks.com/snippets/jquery/smooth-scrolling/

來源

2016-03-23 14:40:16 romellem

那爲什麼在頂端回答鏈接的問題？他們的JSFiddle如何運作？（http://jsfiddle.net/9SDLw/） – Chud37

如果您閱讀[他們的答案]（http://stackoverflow.com/a/7717572/864233）的第二部分，「*如果您的目標元素沒有ID，你通過它的'name'鏈接到它，使用這個：*「，然後列出一些不同的代碼，它們將散列符號（'＃'）去掉。 – romellem

這不是你的現有代碼的解決方案。但是，也許你可以使用我的工作腳本了：

$(".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'); 
    });

你必須在<a href="#product-list">添加class="scroll"。檢查小提琴：http://jsfiddle.net/YtJcL/1409/

來源

2016-03-23 15:09:52 Cornest

平滑滾動與<a href='#'>

回答

相關問題