我正在尝试创建一个包含三个页面的滚动网页
* {
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>-->
如何使导航栏中的过渡更顺畅？ 我跟着一个博客这样做了，但它没有用完。（评论的代码是应该使导航在网页上顺利进行的代码。）
答案 0 :(得分：0)
使用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,
});
在锚点之间平滑滚动： 在Navbar中，使用带有页面滚动类的锚点。例如：
<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();
});
答案 1 :(得分：0)
您的jQuery选择器未定位到锚点。
尝试：
$('.navbar-nav a').smoothScroll();