Velocity Scroll-To

by Brett Miley

HTML

<script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
<div class="site">
    <p>Refresh this page to re-run the demo.</p>
<a class="test" href="#">clickme</a>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div id="container">
        <div id="element1">First element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</div>
        <div id="element2">Second element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntnt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
        <div id="element3">Third element. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et...

CSS

body {
    font-family:"Helvetica Neue", Helvetica;
    width: 90%;
    font-weight: 200;
    letter-spacing: 1px;
    margin: 25px auto 0 auto;
    background: rgb(234, 235, 235);
    color: rgb(25, 25, 25);
}
div, p {
    margin: 0 auto;
}
p {
    color: rgb(125, 125, 125);
    font-size: 0.85rem;
    text-align: center;
    margin-bottom: 17px;
}
#site {
    border: 1px solid gray;
    height: 200px;
    overflow-x: auto;
    overflow-y: auto;
    /* Remember that a scrolling container element must have a position set. */
    position: relative;
    width: 50%;
}
#container div {
    padding-bottom: 10px;
}

JavaScript

$(".scrollto").click(function () {
     $(".PageContentWrap.Pulldown")
         .velocity("scroll", 1000)
         .velocity({
         opacity: 1
     });
 });