Question

我正在尝试在网页上使用jquery设置平滑滚动。

我正在此示例中工作：https://css-tricks.com/snippets/jquery/smooth-scrolling/

当我将其复制并粘贴到js小提琴中时，它可以正常工作。但是由于某种原因，它根本无法在我的网站上运行。如您所见，我已将scripts.js文件链接到index.html，并在控制台中使用console.log消息进行了检查。

这是我的html：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700|Ubuntu:400,500" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
    <title>Zane Mersky</title>
</head>
<body>
    <header>
        <div class="wrapper">
            <div class="heading">
                <div class="logo">
                    <h1>Heading</h1>
                </div>
                <nav>
                    <ul>
                        <li><a href="#philosophy">My Philosophy</a></li>
                        <li><a href="">My Classroom</a></li>
                        <li><a href="">Professional Development</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="intro">
            <div class="img-container">
                <img src="/assets/IMG_6543.JPG" alt="">
            </div>
            <div class="left-intro"></div>

            <div class="right-intro">
                <div class="quote">
                    <h3>"Childhood is not a race to see how quickly a child can read, write and count. It is a small window of time to learn and develop at the pace that is right for each individual child. <br class="break"> Earlier is not better."</h3>
                    <h3 class="author">-Magda Gerber</h3>
                </div>
            </div>
        </div>
    </header>

    <main>
        <section class="philosophy">
                <h1 id="philosophy">My Philosophy</h1>
                <div class="paragraph wrapper">

                </div>
            </section>

            <section class="about">
                <h1>About Me</h1>
            </section>          
    </main>      
</body>
</html>

这是我正在使用的jquery：

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });

有人知道我在做什么错吗？

Answer 1

问题是因为您将指向JS文件的链接放在了头部。将其放在身体底部，它将起作用。

始终将指向JS文件的链接放在正文的结束标记之前。

Answer 2

这是因为您可能已在头中添加了脚本，并且在头中执行了脚本后便加载了文档。要使脚本正常工作，您应该将其添加到正文底部，或者添加一个脚本来检查文档是否准备就绪，就像我在此处的代码片段中所做的一样：

https://codebrace.com/editor/b071c752c

mExampleList在文档加载后加载脚本。

jQuery使用Visual Studio代码平滑滚动

2 个答案: