Move Page to Top : Example

How to move a webpage to the top using jQuery Code2care Examples

by Swami

HTML

<div>
     <h2>Move Page to Top : Example</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tellus massa, aliquet vel sapien sit amet, tincidunt dapibus libero. Fusce egestas leo vel sapien vehicula ultrices. Morbi vehicula mi et lacus placerat, facilisis dignissim magna lacinia. Morbi vel nisl sed ipsum hendrerit ornare. Quisque porttitor augue in odio vestibulum finibus. Nullam non viverra lorem, id molestie lacus. Mauris at tortor non est ornare tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nunc ligula, varius quis tristique tincidunt, porttitor sit amet elit.</p>
    <p>Suspendisse in fermentum lorem. Pellentesque vitae metus sapien. Cras a malesuada tortor. Mauris semper tellus eu nunc dignissim porttitor. Quisque vulputate ornare est, non pharetra urna pharetra eget. Mauris a ipsum lobortis, elementum sem at, consectetur turpis. Etiam id placerat ipsum. Aliquam ullamcorper, lectus vel consectetur consequat, tortor massa feugiat mi, eget feugiat urna sem at justo. Quisque non neque vitae erat tristique facilisis eget id lorem. Proin dignissim lorem et quam commodo mattis. Pellentesque vitae condimentum ante, quis interdum tortor. Etiam eget mauris aliquet, gravida ipsum quis, vestibulum nisl. Cras molestie sapien eget finibus bibendum. Nam ut massa sed ipsum euismod fringilla. Quisque non elit tincidunt, facilisis enim at, commodo enim. Morbi maximus lacus ac lorem lobortis iaculis.</p>
    <p>Morbi sed porta nulla. Nam dictum libero id nibh lobortis euismod a ut sapien. Integer est velit, suscipit non ultricies dignissim, sagittis vel sem. Mauris a pulvinar metus. Integer sem nisi, luctus vel sapien nec, convallis ornare diam. Mauris ipsum nibh, iaculis at laoreet a, egestas non nibh. Phasellus tortor ex, consequat at feugiat vitae, rutrum in nibh. Nunc cursus nibh nec velit luctus, dapibus dapibus lacus molestie. Nulla aliquet erat ut tellus semper euismod. Phasellus vitae...

CSS

.topLink {
    text-align:center;
    border:1px solid #eee;
    padding:10px;
    display:block;
}

JavaScript

function movePageToTop(event) {
    event.preventDefault();
    var scroll = window.setInterval(function () {
        var getYPos = window.pageYOffset;
        if (getYPos > 0) {
            window.scrollTo(0, getYPos - 35);
        } else {
            window.clearInterval(scroll);
        }
    }, 12);
}