qdOvRR

index.html

<br />
<a href="#" id="get">get click me</a>


<br /><br /> 
<span class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus facilis molestiae deserunt ipsum optio dolorem ex sunt accusamus nulla inventore ut amet provident veritatis, voluptatem assumenda nisi mollitia aspernatur voluptatum.</span> <br /><br />  
<br />
<span class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus facilis molestiae deserunt ipsum optio dolorem ex sunt accusamus nulla inventore ut amet provident veritatis, voluptatem assumenda nisi mollitia aspernatur voluptatum.</span>
<br />
<span class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus facilis molestiae deserunt ipsum optio dolorem ex sunt accusamus nulla inventore ut amet provident veritatis, voluptatem assumenda nisi mollitia aspernatur voluptatum.</span>
<br />
<br />
<span class="wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio excepturi repellendus id quis, cum consequuntur totam alias error esse dolore, soluta expedita neque, sed a quibusdam illo dolorum voluptatibus officiis.</span>
<br />
<br />
<br />
<div id="top" href="#">top</div>

qdOvRR.markdown

qdOvRR

A Pen by Veremey on CodePen.

License.

script.js

$(document).ready(function() {
   $(document).on('click', '#get', function () {
        $('html, body').animate({ scrollTop: $('#top').offset().top }, 1000 );
        return false;
    });
 });

style.css

#get{
  color: #c63;
  font-style: 20px;
}
.red{
  display: block;
  background-color: red;

  width: 100px;
}
.wrap{
display: block;
  width: 100px;}