Fatal编程技术网
  • javascript/
  • Javascript 使用VisualStudio代码的jquery平滑滚动

Javascript 使用VisualStudio代码的jquery平滑滚动

javascript jquery html

Javascript 使用VisualStudio代码的jquery平滑滚动,javascript,jquery,html,smooth-scrolling,Javascript,Jquery,Html,Smooth Scrolling,我正在尝试在我的网页上使用jquery设置平滑滚动 我在这里以这个例子为例： 当我将其复制并粘贴到js fiddle中时，效果很好。但出于某种原因，我的网站根本不起作用。如您所见，我已将scripts.js文件链接到index.html，并在控制台中通过console.log消息检查了这一点 这是我的html： !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

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

我在这里以这个例子为例：

当我将其复制并粘贴到js fiddle中时，效果很好。但出于某种原因，我的网站根本不起作用。如您所见，我已将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>
有人知道我做错了什么吗？

问题在于你把JS文件的链接放在了头上。把它放在身体底部，它就会起作用

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

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

$（“文档”）.ready（…
在加载文档后加载脚本。

请添加项目的结构好吗？ 
// 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
          };
        });
      }
    }
  });