Search code examples
javascriptjqueryhtmlscrollsmooth-scrolling

Smooth scroll with jQuery not working on my website


I'm kinda new to code but when I try to use a jQuery script for smooth scrolling it never works.

If I click on my button it scrolls to the div, but not smoothly.

// Document ready shorthand statement
$(function() {
    $('.link').click(function() {
        var id = $(this).attr('href');
        $('html,body').animate({
            scrollTop: $(id).offset().top
        }, 'slow');
        // Prevent default behavior of link
        return false;
    });
});
#portfolio {/* just to make it visible */
    margin-top: 100vh;
}
<a href="#portfolio"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a>

<div id="portfolio" class="container pt-5">
    <div class="row d-flex justify-content-center">
        <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200">
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Solution

  • You just forgot to add the class "link" in your markup...

    $(function() {
        // Hint: in this implementation you even don't need to specify a class and write
        // "$('a').click(function( oEvent ) {" instead
        $('.link').click(function( oEvent ) {
            var id = $(this).attr('href'),
                $target = $(id);
            if ( $target.length ) { // check if there is a valid target first @Hint
                oEvent.preventDefault(); // Prevent default behavior of link
                $('html,body').animate({
                    scrollTop: $target.offset().top
                }, 'slow');
                // return false prevents event from bubbling which isn't a good practice
            }
        });
    });
    #portfolio {/* just to make it visible */
        margin-top: 100vh;
    }
    <!-- dont't forget to add your class "link" -->
    <a href="#portfolio" class="link"><button type="button" class="btn btn-lg btn-outline-info">Scroll down</button></a>
    
    <div id="portfolio" class="container pt-5">
      <div class="row d-flex justify-content-center">
        <img id="thumb" src="images/img/01.jpg" class="img-thumbnail m-2 img-responsive" width="300" height="200">
      </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    EDIT | advanced snippet (append hash to url after smooth scrolling ended)

    $(function() {
        $('body').click(function( oEvent ) {
            var $link = $( oEvent.target ),$target, sUrl;
            if ( $link[0].hash || ($link = $link.closest('a'))[0].hash ) {
                $target = $( $link[0].hash );
                if ( $target.length ) {
                    oEvent.preventDefault();
                    sUrl = window.location + $link[0].hash
                    $('html,body').animate(
                        { scrollTop: $target.offset().top },
                        'slow',
                        function() { window.location = sUrl; } // set new location
                    );
                }
            }
        });
    });
    

    If you want/need some deeper explanantions let me know...