jQuery animate() scroll to the top of the page

Description

jQuery animate() scroll to the top of the page

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery scrollTop Animation</title>
<style>
    .scroll-top{
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 99;/*from  ww w  .j  a  v  a2s  .c  o  m*/
        background: red;
        color: #fff;
        border-radius: 30px;
        padding: 15px;
        font-weight: bold;
        line-height: normal;
        border: none;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $(".scroll-top").click(function() {
        $("html, body").animate({
            scrollTop: 0
        }, "slow");
        return false;
    });
});
</script>
</head>
<body>
    <button type="button" class="scroll-top">Go to Top</button>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. 
    Vestibulum id metus ac nisl bibendum scelerisque non non purus. 
    Suspendisse varius nibh non aliquet sagittis. In tincidunt orci 
    sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. 
    Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit 
    at bibendum eu, tristique eget risus. Integer aliquet quam ut elit 
    suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. 
    Vestibulum id metus ac nisl bibendum scelerisque non non purus. 
    Suspendisse varius nibh non aliquet sagittis. In tincidunt orci 
    sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. 
    Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit 
    at bibendum eu, tristique eget risus. Integer aliquet quam ut elit 
    suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. 
    Vestibulum id metus ac nisl bibendum scelerisque non non purus. 
    Suspendisse varius nibh non aliquet sagittis. In tincidunt orci 
    sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. 
    Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit 
    at bibendum eu, tristique eget risus. Integer aliquet quam ut elit 
    suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. 
    Vestibulum id metus ac nisl bibendum scelerisque non non purus. 
    Suspendisse varius nibh non aliquet sagittis. In tincidunt orci 
    sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. 
    Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit 
    at bibendum eu, tristique eget risus. Integer aliquet quam ut elit 
    suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. 
    Vestibulum id metus ac nisl bibendum scelerisque non non purus. 
    Suspendisse varius nibh non aliquet sagittis. In tincidunt orci 
    sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. 
    Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit 
    at bibendum eu, tristique eget risus. Integer aliquet quam ut elit 
    suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>


</body>
</html>



PreviousNext

Related