Useful Stuff About:

Vertically Scrolling to Content

This examples demonstrates how buttons can make the page scroll (not jump) to a particular content section with javascript. Click on the links in the red bar above or in the sections below to see the effect.

Features include:

Sections can be of different heights
Easing applied to scrolling effect
User can optionally use the scrollbar on the browser window
Links to sections can be located anywhere on the page

Section 1 -

scroll to the top

scroll to section 1

scroll to section 2

scroll to section 3

scroll to section 4

Scripts needed (copy and paste inside <head>) - check that you don't already have these because you only need ONE of each script.


    
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/easing.compatibility.js"></script>
<script type="text/javascript" src="path_to_your_javascript_file.js"></script><!--ADJUST TO CORRECT PATH-->

HTML Code


    
<!--This block of code should be just under the <body> tag-->
<nav>
      <div class="btn" id="btn1">scroll to section 1</div><!--Do NOT use usual <a href=""...> method - it causes a glitch-->
      <div class="btn" id="btn2">scroll to section 2</div>
      <div class="btn" id="btn3">scroll to section 3</div>
      <div class="btn" id="btn4">scroll to section 4</div>
</nav>
<div id="centeringDiv">
   <section id="section1">Section 1 content</section> 
   <section id="section2">Section 2 content</section>
   <section id="section3">Section 3 content</section>
   <section id="section4">Section 4 content</section>
</div>
<footer>&copy; 20XX First Last. All rights reserved</footer>

CSS Code


    
nav {/*This is a fixed position bar along the top*/
   background-color: rgba(0,0,0,0.5);/*0.5 makes the bar 50% transparent*/
   position:fixed;
   top:0;
   left:0;
   width:100%;/*makes this bar as wide as the browser*/
   height:150px;
   display:-webkit-flex;
   display:flex;
   justify-content:center;/*horizontally centers children*/
   align-content:center;/*vertically centers children */
   z-index:10000;/*places bar top most so it's always clickable*/
}
.btn {
   cursor:pointer;
   margin:auto;/*IMPORTANT - needed to work with display:flex */
/*You can also add styles such as text link color, custom fonts, font-size, etc.*/
}
.btn:hover {
/*You can add styles for when user hovers over the button*/
}

Javascript Code


    
var topAdjustment, scrollTime, easingMethod;
   //set initial values for variables
   navH = $("nav").height();//sets variable to height of topBarCentering
   scrollTime = 1000;//how much time in milliseconds 1000ms=1s do you want the scroll to occur
   easingMethod = "easeInOutExpo";//type of easing for the scroll effect
   //actions when buttons are clicked
   $(".btn").click(function () {
      var btnClicked=$(this).attr("ID");
      var sectionNumber=btnClicked.substring(3,5);//extracts the button number, i.e. btn1 becomes 1
      var targetSection = "#section"+sectionNumber;
      if(btnClicked !== "btnProjects") {
         $("html, body").stop().animate({//stop is for quick clicking of buttons to stop current action
            "scrollTop": $(targetSection).offset().top - navH//the executes the scrolling action to new y position
         }, scrollTime, easingMethod);
      } else {
         window.location.href="/~UsernamE";
      }
   });