javascript - 流畅的滚动页面

Question

我正在尝试创建一个由三页组成的滚动网页

* {
  margin-top: 0;
  margin-bottom: 0;
}

#page1 {
  height: 1000px;
  background-color: #000;
  color: white;
}

#page2 {
  height: 1000px;
  color: white;
  background-color: #18121e;
  padding-top: 140px;
  border-top: 100px;
  
}

#page3 {
  height: 650px;
  color: white;
  background-color: #233237;
  background-size: cover;
  padding-top: 200px;
  
}

body {
  padding-top: 0px;
}

#page1 p {
  padding-top: 100px;
  font-size: 2.5rem;
}

#page1 p #highlight {
  color: pink !important;
}

#page2 h3 {
  padding-bottom: 80px;
  line-height: 1.5;
}

#page3 h3 {
  padding-bottom: 100px;
  line-height: 1.5;
}

.btn {
  color: white;
  background-color: #000 !important;
}

.btn:hover {
  color: gray;
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
      <a class="navbar-brand" href="#">Rashid Naushad</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
  <div id="page1">
    <a id="about" class="smooth"></a>
    <br><br><br>
    <p class="text-center">Hi !<br>I'm a self taught web developer based in India.<br> I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.<br> I dream of combining my knowledge of programming, economics, and <br>financial markets
      for the betterment of the society.<br> Languages and Frameworks:<br> HTML5, CSS3, Bootstrap3,<br> Javascript, jQuery, Angular.js, Meteor.js,<br> Node.js, React,js,<br> Python, php..<br> Tools & expertise: Git, Responsive Web Design.</p>
  </div>

  <div id="page2">
    <a id="portfolio" class="smooth"></a>
    <h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
    <div class="row">
      <div class="thumbnail img img-responsive">
        <p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/VaKMBJ/">Simple Javascript App</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p>
        <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
      </div>

      <div class="thumbnail img img-responsive">
        <p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen <a href="http://codepen.io/rashidnaushad/pen/pyPjae/">Tribute to Raghuram Rajan</a> by Rashid Naushad (<a href="http://codepen.io/rashidnaushad">@rashidnaushad</a>) on <a href="http://codepen.io">CodePen</a>.</p>
        <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
      </div>
    </div>
    <div class="row">
      <div class="thumbnail">
        <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
        <div class="caption">
          <h5 class="text-center">Coming Soon!</h5>
        </div>
      </div>

      <div class="thumbnail">
        <img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
        <div class="caption">
          <h5 class="text-center">Coming Soon!</h5>
        </div>
      </div>
    </div>
  </div>

  <div id="page3">
    <a id="contact" class="smooth"></a>
    <h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
    <a href="https://github.com/rashidnaushad" class="btn btn-lg col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">GitHub</a>
    <div class="hidden-lg hidden-md"><br></div>
    <a href="https://www.freecodecamp.com/rashidnaushad" class="btn btn-lg col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">freeCodeCamp</a>
    <div class="hidden-lg hidden-md"><br></div>
    <a href="mailto:rashidnaushad3@gmail.com" class="btn btn-lg col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2" target="_blank">Gmail</a>
  </div>
</div>
<!--<script src="https://github.com/kswedberg/jquery-smooth-scroll/blob/master/jquery.smooth-scroll.min.js"></script>
	<script>
	$('.smooth').on('click', function() {
	    $.smoothScroll({
	        scrollElement: $('body'),
	        scrollTarget: '#' + this.id
	    });
	    
	    return false;
	});
	</script>-->

如何使导航栏的过渡更顺畅？我关注了一个博客来这样做，但没有成功。(注释代码是应该使网页导航顺畅的代码。)

Answer 1

使用 nicescroll 插件并添加以下 jQuery 代码。

NiceScroll CDN 网址:https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js

$("html").niceScroll({
    scrollspeed: 51,
    mousescrollstep: 45,
});

为了在 anchor 之间平滑滚动:在导航栏中使用带有 page-scroll 类的 anchor 。例如:

  <ul class="nav navbar-nav navbar-right">
    <li><a class="page-scroll" href="#" target="_blank">Full Screen</a></li>        
    <li><a class="page-scroll" href="#Born">Born</a></li>
    <li><a class="page-scroll" href="#Education">Education</a></li>
    <li><a class="page-scroll" href="#Career">Career</a></li>
  </ul>

然后使用以下 jquery 片段。

    $('a.page-scroll').on('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 60
        }, 1000);
        event.preventDefault();
    });