时间戳

首页 > 解决方案 > 使用锚点创建平滑滚动

jquery - 使用锚点创建平滑滚动

问题描述

我试图在锚点之间创建平滑滚动，但是我似乎无法让它工作 - 我不确定这是否是因为我的网站使用水平滚动而不是垂直滚动，或者我是否只是错过了一些明显的东西（我是编码新手）。

我已经尝试过 CSS 技巧教程（https://css-tricks.com/snippets/jquery/smooth-scrolling/）。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <title>Nathan Wilson</title>

    <meta name="description"
        content="Hi, I'm Nathan Wilson, a Graphic Designer based in Nottingham, U.K.">
    <meta name="keywords"
        content="Nathan, Wilson, Graphic, Design, Designer, Portfolio, Nottingham, UK, U.K, U.K., England, East, Midlands, Website, Web, Logo, Branding, Rebrand, Rebranding, Junior, Local">
    <meta name="author" content="Nathan Wilson">

    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="images/logo.ico">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/main.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo:700,800" rel="stylesheet">

 </head>

<body>

<div class="logo">
    <img src="images/logo.png">
</div>

<div id="navbar">
    <div class="tab1">
    <a class="link1" href="#home">
        <div class="text1">Home</div>
    </a></div>
    <div class="tab2">
    <a class="link2" href="#work">
        <div class="text2">Work</div>
    </a></div>
    <div class="tab3">
    <a class="link3" href="#about">
        <div class="text3">About</div>
    </a></div>
</div>


<div id="container">

  <div id="fullscreen">

    <div class="box home" id="home">

    <div class="heading">
        <h1>Hi,</h1>
        <h2>I'm Nathan Wilson</h2>
        <h3>a Graphic Designer based in Nottingham, U.K.</h3>
    </div>

    </div>

    <div class="box work" id="work">

    </div>
    <div class="box about" id="about">

    </div>
  </div>
</div>


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

谢谢您的帮助。

标签： jqueryhtmlcssscrollsmooth-scrolling

解决方案

你也可以这样做

html {
  scroll-behavior: smooth;
}
.space {
  height: 100vh;
}
<a href="#users">Users</a>
<a href="#child">Child</a>
<a href="#parent">Parent</a>

<div class="space"></div>
<div id="users">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit quae dignissimos architecto perferendis eum nobis, sit, itaque reprehenderit, possimus aliquam esse vel autem amet recusandae necessitatibus officiis, aspernatur officia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam dolore asperiores, a placeat aperiam similique quia eius veritatis dicta, temporibus est cumque quae accusamus molestias! Asperiores, eligendi, libero. Quaerat, totam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat laboriosam aperiam cum unde est consectetur quidem incidunt voluptatibus hic consequuntur. Necessitatibus cupiditate atque nam dolorem, voluptatum sit ab optio sunt!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tenetur consequatur nobis delectus vitae quia, accusantium qui officiis dolores repudiandae, itaque quidem magnam animi accusamus molestiae, ipsam cum. Tempora, minima.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae fugiat adipisci obcaecati tenetur iste repellat, et nam veritatis fugit dolorem! Vitae animi magnam, laborum similique corporis enim est nihil aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quidem repellat accusantium, itaque illum magnam error quis! Eligendi maxime laudantium asperiores itaque, harum nemo in ex provident eveniet voluptatem. Iure.
</div>
<div class="space"></div>
<div id="child">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam culpa neque error sunt laboriosam nobis earum deserunt blanditiis voluptatum dolor quis, quaerat ducimus quidem reiciendis molestias autem laborum eius quae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corporis ipsum officia quisquam libero nostrum, iste sit impedit saepe, eligendi veniam laborum porro aspernatur ea nobis nisi, quos fugiat. Non!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aspernatur natus officia quasi beatae rem alias magnam maiores dolores dignissimos facere quo amet reprehenderit quam, tempora, fugiat eligendi, labore ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, sed saepe, deserunt hic amet autem ratione est voluptates maxime vitae veritatis, itaque impedit sunt quod mollitia voluptas totam magnam perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus voluptates laboriosam ad ipsam alias beatae, tenetur odio, neque corporis velit at nihil nam obcaecati voluptatibus mollitia repellendus repellat a eius.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta nihil ducimus sed fuga voluptas suscipit obcaecati ea laborum, consectetur doloremque maiores laudantium placeat libero expedita modi accusantium error, doloribus odio.
</div>
<div class="space"></div>
<div id="parent">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut ipsa quibusdam error nobis cum illo aperiam quis quae eius quisquam, veniam totam accusantium ratione eaque, libero in repellat ducimus officia.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam eos corrupti ut iusto alias ad reprehenderit temporibus praesentium facilis quidem saepe voluptates, nostrum iste atque repellendus ipsam a labore laborum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum iure inventore animi, distinctio suscipit, nemo libero placeat ducimus recusandae, esse unde error deleniti. Commodi officia excepturi dolorum quisquam beatae quaerat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut ea, voluptate harum nesciunt! Sit et qui harum temporibus, illo tenetur? Veniam maxime atque, architecto nulla itaque perferendis quo eveniet fugit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta ullam dolor perferendis, hic rem fuga vero placeat quia ducimus quam odit tempora in totam aperiam expedita id voluptatibus, sapiente recusandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque obcaecati dolores temporibus cum perspiciatis eum enim consequuntur beatae nihil, natus ullam, ut quia esse voluptates quaerat hic iste recusandae. Id?
</div>

推荐阅读