無法讀取未定義的Jquery / javascript的屬性“ top”

Question

可能這個問題之前已經被回答過很多次了，但是我找不到與我的代碼相關的任何東西。

一切正常，當打開菜單導航等時， smooth scrolling起作用，除非當我單擊arrow-down以轉到下一部分時，平滑滾動不起作用。 我一直在研究它，並試圖弄清楚它一段時間，但我無法做到。

我還在學習jquery和javascript。 您可以在此處找到此代碼的完整演示。 打開開發工具，您將在控制台中看到錯誤。

編輯已添加。

.arrow-down-wrapper a[href^="#"]

至

$('nav.mobile-nav a[href^="#"], .arrow-down-wrapper a[href^="#"]').on('click', function (e) {
...
}

平滑滾動不適用於“向下箭頭”，但我仍收到“未捕獲的TypeError：無法讀取未定義的屬性” top”

console.log(target); 輸出正確的目標。 ＃Home，＃about等。

這是我的代碼：

    //smooth transition to sctions when links in header are clicked

    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a').each(function () {
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }
      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });
            });
        });

Answer 1

這是一種風格，因此該值，在JavaScript中，將需要.style.top不僅僅是.top 。 這就是為什么您得到“未定義”的原因。 沒有為您使用的對象分配top屬性。

我不使用jQuery，但是在javascript中，要檢索top屬性，您可以執行以下操作：

var a = document.getElementsByTagName('div')[0];
var b = a.style.top;
console.log(parseInt(b,10)); //cause b will be equal to 'nnpx' and parseInt removes the 'px'

但是，這不會讀取CSS中設置的任何最高值。 您需要使用javascript設置值才能閱讀。 有一種方法可以讀取CSS樣式表中設置的值，但我不記得如何。

Answer 2

問題在於代碼不夠具體。 循環遍歷列表中的所有項目，即#tags所在的所有鏈接以及指向其他頁面的鏈接。 這就是為什么我得到top的錯誤未定義的原因，它正在尋找的項目不存在。 a[href^="#"'之后，僅循環＃個ID標簽的項目。

評論了我所做的更改

//單擊標題中的鏈接時，平滑過渡到部分

    function onScroll(event){
      var scrollPosition = $(document).scrollTop();
      $('nav.mobile-nav a[href^="#"').each(function () { //added a[href^="#"] so that the loop only iterates over the elements with the ID tag
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        console.log(currentLink.attr("href")); //log
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
          $('nav.mobile-nav a').removeClass("current");
          currentLink.addClass("current");
        }
        else{
          currentLink.removeClass("current");
        }

      });
    }

    $(document).ready(function () {
            $(document).on("scroll", onScroll);

            $('nav.mobile-nav a[href^="#"], .arrow-down-wrapper a[href^="#"]').on('click', function (e) {
                e.preventDefault();
                $(document).off("scroll");

                $('nav.mobile-nav a').each(function () {
                    $(this).removeClass('current');
                });
                $(this).addClass('current');

                var target = this.hash;
                $target = $(target);
          console.log(target);
          $('html, body').stop().animate({
                    'scrollTop': $target.offset().top - 100
                }, 1000, 'swing', function () {
                    window.location.hash = target;
                    $(document).on("scroll", onScroll);
                });

            });
        });

Answer 3

我實際上沒有問題。 打開開發工具我有一些錯誤，但是您網站上的平滑滾動對我來說很好。

看看我制作的這個jsfiddle：

https://jsfiddle.net/p4x3d2dn/1/

的HTML

<ul class="nav">
  <li><a class="scroll" href="#section_home">Home</a></li>
  <li><a class="scroll" href="#section_about">About</a></li>
  <li><a class="scroll" href="#section_team">Team</a></li>
  <li><a class="scroll" href="#section_gallery">Gallery</a></li>
  <li><a class="scroll" href="#section_contact">Contact</a></li>
</ul>

<section id="section_home">
  <h1>Home</h1>
</section>
<section id="section_about">
  <h1>About</h1>
</section>
<section id="section_team">
  <h1>Team</h1>
</section>
<section id="section_gallery">
  <h1>Gallery</h1>
</section>
<section id="section_contact">
  <h1>Contact</h1>
</section>

添加其他鏈接（例如向下滾動箭頭）僅是將正確的href屬性添加到.scroll標記中：

<a class="scroll" href="#section_whatever_you_want">
    <i class="fa fa-chevron-down"></i>
</a>

如果您具有自定義生成的部分並且不受DOM的控制，則必須采用略有不同的方法

這就是您需要的所有JavaScript ：

$(document).ready(function() {

  $(".scroll").on("click", function() {
    //event.preventDefault();
    var el = $(this).attr("href");
    $('html, body').animate({
      scrollTop: $(el).offset().top
    }, 2000);
  });

});