Создание плавной прокрутки с помощью опорных точек - PullRequest
Новая
       31

Создание плавной прокрутки с помощью опорных точек

0 голосов
/ 29 января 2019

Я пытаюсь создать плавную прокрутку между опорными точками, однако я не могу заставить ее работать - я не уверен, что это потому, что я использую горизонтальную прокрутку для своего сайта, а не вертикальную, или я простоупустил что-то очевидное (я новичок в кодировании).

Я пробовал учебник по трюкам 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
          };
        });
      }
    }
  });

Спасибо за помощь.

1 Ответ

0 голосов
/ 29 января 2019

вы также можете сделать таким образом 

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>
...