Question

这个问题可能以前已经被多次回答了，但我找不到任何与我的代码有关的内容。

一切正常，当菜单导航打开等时，smooth scrolling也可以正常工作，除非我单击arrow-down进入下一部分，否则平滑滚动不起作用。我一直在看它并试图解决它一段时间，但我无法这样做。

我还在学习jquery和javascript。可以在 HERE. 中找到正在使用的此代码的完整演示打开开发工具，您将在控制台中看到错误。

修改加入..

.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和其他页面链接的所有链接。这就是我得到顶部未定义错误的原因，它所寻找的项目不存在。 a[href^="#"'添加之后，循环仅使用#ID标记迭代项目。

对我所做的更改进行了评论

//单击标题中的链接时平滑过渡到sction

    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>

添加其他链接（例如向下滚动箭头）只需在.scroll标记中添加正确的 href 属性：

<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);
  });

});

无法读取未定义的Jquery / javascript

3 个答案: