平滑滾動頁面

我試圖創建一個單一的滾動網頁由平滑滾動頁面

* { 
 
    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"> 
 
\t \t   <span class="sr-only">Toggle navigation</span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t   <span class="icon-bar"></span> 
 
\t \t  </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:[email protected]" 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> 
 
\t <script> 
 
\t $('.smooth').on('click', function() { 
 
\t  $.smoothScroll({ 
 
\t   scrollElement: $('body'), 
 
\t   scrollTarget: '#' + this.id 
 
\t  }); 
 
\t  
 
\t  return false; 
 
\t }); 
 
\t </script>-->

我如何通過導航欄的過渡平滑三頁？我跟着一個博客這樣做，但它沒有工作（評論代碼是應該使導航平滑通過網頁的代碼）。

來源

2016-03-26 Rashid

使用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, 
});

對於平滑滾動錨之間： 在導航欄使用錨與頁滾動類。例如：

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

來源

2016-03-26 08:47:02 arsho

工作就像一個魅力.. 有沒有辦法可以讓頁面開始滾動停止，不像現在，當它停止中途頁面一起..這裏是小提琴..https：//jsfiddle.net/rashidnaushad/pc0u790m/3/ – Rashid

您的jQuery選擇器不是定位錨點。

嘗試：

$('.navbar-nav a').smoothScroll();

來源

2016-03-26 09:00:39

，沒有工作..一路第二個解決方案建議由@arsho工作..所以謝謝無論如何嘗試 – Rashid

平滑滾動頁面

回答

相關問題