JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

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:

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="http://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="http://www.freestyleacademy.rocks/jquery/easing.js"></script>
<script type="text/javascript" src="http://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";
}
});
Section 2 -
scroll to the top
|
scroll to section 1
|
scroll to section 2
|
scroll to section 3
|
scroll to section 4
Section 3 -
scroll to the top
|
scroll to section 1
|
scroll to section 2
|
scroll to section 3
|
scroll to section 4
Section 4 -
scroll to the top
|
scroll to section 1
|
scroll to section 2
|
scroll to section 3
|
scroll to section 4