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