Невозможно прочитать свойство «верх» неопределенного JQuery/javascript

Question

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

Все работает нормально, когда открыто меню и т.д. smooth scrolling работает, кроме случаев, когда я нажимаю arrow-down, чтобы перейти в следующий раздел, гладкая прокрутка не работает. Я смотрел на него и пытался понять это на некоторое время, но я не могу этого сделать.

Я все еще изучаю jquery и javascript. Полную версию этого кода можно найти HERE. Откройте инструменты для разработчиков, и вы увидите ошибки в консоли.

EDIT добавлен ..

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

в

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

Плавная прокрутка не работает для 'стрелка вниз', но я все еще получаю «неперехваченным TypeError: не могу прочитать свойство «верх» не определено »

console.log(target); выводит правильное значение t argets. #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

Проблема заключалась в том, что код был недостаточно конкретным. Цикл повторялся через все элементы в списке, то есть все ссылки, где #tags и ссылки на другие страницы. Именно по этой причине я получал ошибку верхнего не определено, этот элемент, который он искал, не существовал. a[href^="#"' После добавления этого цикла цикл повторяется только с тегами # ID.

комментируемые изменения я сделал

// плавный переход к sctions, когда ссылки в заголовке щелкают

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 2

Это стиль, так что значение, в JavaScript, должен был бы быть .style.top не только .top. Вот почему вы получаете «undefined». На объект, который вы используете, не имеет свойства top.

Я не использую JQuery, но в JavaScript, чтобы получить верхнюю собственность, вы могли бы сделать что-то вроде:

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 3

Я на самом деле не получить эту проблему. Открывая инструменты dev, у меня есть некоторые ошибки, но гладкий свиток на вашем веб-сайте отлично подходит для меня.

Посмотрите на эту 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); 
    }); 

});