How to animate scrollLeft using jQuery?

jQueryWeb DevelopmentFront End Technology

To animate scrollLeft using jQuery, use the animate() method with scrollLeft.

Example

You can try to run the following code to learn how to animate scrollLeft using jQuery:

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#scrollme').click(function() {
    $('html,body').animate({
        scrollLeft: $('#demo').css('left')
    }, 500, function() {

        $('html, body').animate({
            scrollLeft: 0
        }, 500);

    });
});
});
</script>
<style>
#demo {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    left: 800px;
}
</style>
</head>
<body>
<p><button id="scrollme">Click to scroll left</button></p>

<div id="demo"></div>

</body>
</html>
raja
Updated on 17-Dec-2019 07:43:36

Advertisements