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.

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*/}