ScrollTwo

Анимированный скролл по якорю

HTML

<a class="anchor" href="#id">scroll to</a>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, explicabo, necessitatibus! Officiis fugiat a, aut fuga iusto expedita ullam! Nostrum quod, fugit, repellat perferendis minima adipisci accusamus ullam nobis est dolorum unde voluptas sed alias veniam perspiciatis debitis illum dolores. Quae voluptatibus quia earum nesciunt, sapiente animi ipsam nemo voluptatem voluptatum reiciendis provident quibusdam nam labore necessitatibus molestiae! Velit, eveniet facere perspiciatis. Sit aspernatur quos possimus dolor dicta dolore iste, amet aut illo obcaecati fugiat eum molestiae laboriosam numquam, esse doloribus labore deserunt consequuntur laudantium omnis voluptates totam necessitatibus quibusdam. Reiciendis distinctio dolores enim modi quod nemo voluptates, esse libero dolorum ipsam doloribus repudiandae iure in debitis ex error quis blanditiis sequi nesciunt illum incidunt illo accusamus expedita deleniti consequuntur. Explicabo ab saepe ipsam quidem totam libero pariatur ipsum veniam maxime unde nemo quasi dolore aut animi repellendus ullam quam eligendi obcaecati, magni harum possimus provident quo nihil. Expedita reiciendis fuga dolor eius animi harum enim quae architecto consectetur nemo fugit facilis et, assumenda, nihil recusandae repudiandae fugiat ipsa sapiente ab ipsam? Eos vel distinctio magni eaque voluptatum ex consequatur repudiandae quibusdam quidem cupiditate explicabo delectus esse, ad incidunt, cumque! Ex facere provident doloremque doloribus eum autem, rem accusantium sequi ullam, modi odio harum dignissimos eius cumque quas dolorem reiciendis alias! Officia voluptatibus cum reiciendis vitae similique. Dolores vero dolorum perspiciatis earum tenetur quisquam eveniet ad reiciendis molestiae nesciunt, sed consectetur repudiandae pariatur voluptatibus aut, dignissimos, beatae inventore? Similique omnis doloremque, ducimus eligendi reprehenderit voluptatem enim adipisci commodi, porro debitis...

CSS

/* Styles for example */
#id{
    margin-top:10px;
}
body{
    background: #d0e4f7;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI0JSIgc3RvcC1jb2xvcj0iIzczYjFlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhNzdkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iIzUzOWZlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4N2JjZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
            background: -moz-linear-gradient(top,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea));
            background: -webkit-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
            background: -o-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
            background: -ms-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
            background: linear-gradient(to bottom,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 );
}

JavaScript

$("body").on("click", "a.anchor", function(){
    var idtop = $($(this).attr("href")).offset().top;
    $('html,body').animate({scrollTop: idtop}, 500);
    return false;
});