使用scrollspy

时间:2018-02-20 20:00:54

标签: javascript html twitter-bootstrap smooth-scrolling

警告:我是JavaScript的新手。

我正在为一个家庭成员开发一个网站,我偶然发现了一个问题。我正在使用Bootstrap 4作为网站,以及它们的导航栏框架。导航栏固定在顶部,并使用ScrollSpy突出显示活动部分。

我正在使用W3中的代码让我的导航链接慢慢向下滚动页面到一个部分。

    $(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

没有运气。我的导航链接不再工作,我得到这些讨厌的控制台错误

master.js:15 Uncaught TypeError: $(...).animate is not a function
    at HTMLAnchorElement.<anonymous> (master.js:15)
    at HTMLAnchorElement.dispatch (jquery-3.2.1.slim.min.js:3)
    at HTMLAnchorElement.q.handle (jquery-3.2.1.slim.min.js:3)

我知道你在想什么,master.js是在jQuery之前获得的。不!

我很感激我能得到的任何帮助。

1 个答案:

答案 0 :(得分:0)

请在此处查看答案:jquery : $().animate() is not a function

  

你似乎正在使用jQuery 3.2.1的超薄版本,但它并没有   包括大部分图书馆。相反,你应该使用完整的   版本

     

https://code.jquery.com/jquery-3.2.1.js