CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapscroll
DCR
DCR

Reputation: 15657

Scroll div to the top of page using bootstrap and jquery

I have the following example almost working but would like to get the links on the right in the navbar to scroll the div to the top of the browser just below the navbar. It works if there's more div left to be seen. The contact link scrolls the full div into view but not to the top of the page.(easier to see in full page mode)

body {
      position: relative; 
  }
  #home {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
  #about {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
  #portfolio {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
  #contact {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<html>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="http://codepen.io/rss81/pens/public/" target='_blank'>RSS81</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right" >
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>          
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="home" class="container-fluid">
  <h1>Home</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="about" class="container-fluid">
  <h1>About</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid">
  <h1>Portfolio</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid">
  <h1>Contact</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>


</body>
</html>

Upvotes: 0

Views: 881

Answers (1)

lhavCoder
lhavCoder

Reputation: 961

I have one possible solution for this. You could make the bottom most div take up the entire page's height so that it scrolls all the way to the top.

I made the bottom most div take up the entire screens space using

min-height:100vh;


body {
      position: relative; 
  }
  #home {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
  #about {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
  #portfolio {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
  #contact {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;
  min-height:100vh;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<html>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="http://codepen.io/rss81/pens/public/" target='_blank'>RSS81</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right" >
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>          
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="home" class="container-fluid">
  <h1>Home</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="about" class="container-fluid">
  <h1>About</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid">
  <h1>Portfolio</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid">
  <h1>Contact</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>


</body>
</html>

Upvotes: 3

Related Questions