Smooth Scroll

index.html

<div class="container">
	<div class="full-height text-center">
		<a href="#next" class="smooth-scroll"><i class="fa fa-chevron-down" id="top-down-arrow"></i></a>
	</div>
</div>
<div class="container full-height" id="next">
	<div class="text-center">
		<h1>My Next Element</h1>
		
	</div>
</div>

script.js

$(".smooth-scroll").click(function() {
	var href = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(href).offset().top
        }, 800);
    });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Smooth Scroll.markdown

Smooth Scroll

My go to for smooth scrolling

A Pen by Dominic Talbot on CodePen.

License.

style.css

#top-down-arrow {
	color: #222;
  text-shadow: 1px 3px 21px 	rgba(150, 150, 150, 0.74);
  font-size: 100px;
	}
	
.full-height {
	height: 100vh;
	}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />