CODEWITHSUNDEEP
javascriptjqueryhtmlscrollsmooth-scrolling
user8529538
user8529538

Reputation:

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>

Upvotes: 0

Views: 860

Answers (1)

Axel
Axel

Reputation: 3323

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...

Upvotes: 1

Related Questions