jQuery.scrollSpeed 脚本根本不允许我滚动

jQuery.scrollSpeed script won't let me scroll at all

我一直在尝试使用 this jQuery script

获得流畅的滚动系统

包括版本 1.0 只允许我向上滚动 1.0.1版本是一样的 1.0.2 版根本无法滚动。

有人可以告诉我如何将它包含在网页中吗？我试过从 this codepen 复制代码，但没有成功。 

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    // Custom scrolling speed with jQuery
    // Source: github.com/ByNathan/jQuery.scrollSpeed
    // Version: 1.0

    (function($) {

      jQuery.scrollSpeed = function(step, speed) {

        var $document = $(document),

          $window = $(window),

          $body = $('html, body'),

          viewport = $window.height(),

          top = 0,

          scroll = false;

        if (window.navigator.msPointerEnabled)

          return false;

        $window.on('mousewheel DOMMouseScroll', function(e) {

          scroll = true;

          if (e.originalEvent.wheelDeltaY < 0 || e.originalEvent.detail > 0)

            top = (top + viewport) >= $document.height() ? top : top += step;

          if (e.originalEvent.wheelDeltaY > 0 || e.originalEvent.detail < 0)

            top = top <= 0 ? 0 : top -= step;

          $body.stop().animate({

            scrollTop: top

          }, speed, 'default', function() {

            scroll = false;

          });

          return false;

        }).on('scroll', function() {

          if (!scroll) top = $window.scrollTop();

        }).on('resize', function() {

          viewport = $window.height();

        });
      };

      jQuery.easing.default = function(x, t, b, c, d) {

        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
      };

    })(jQuery);
  </script>

  <script>
    jQuery.scrollSpeed(200, 800)
  </script>

  <style>
    h1 {
      font-family: 'Open Sans', sans-serif;
      position: fixed;
      top: 50%;
      width: 100%;
      text-align: center;
      color: white;
      text-shadow: 3px 3px 8px black;
    }

    #section1,
    #section2,
    #section3,
    #section4 {
      min-height: 800px;
    }

    #section1 {
      background: royalblue;
    }

    #section2 {
      background: gold;
    }

    #section3 {
      background: purple;
    }

    #section4 {
      background: teal;
    }
  </style>
</head>

<body style="">
  <h1>Smooth Mouse Scroll</h1>
  <div id="section1"></div>
  <div id="section2"></div>
  <div id="section3"></div>
  <div id="section4"></div>

My current code

已通过添加修复 <!DOCTYPE html> 到 index.html

的顶部