Put scroll down

Asked

Viewed 318 times

0

I have this jquery that animates the scroll when you click on a link.

How do I so that when I click on the link the scroll goes a little lower, like a 10% down, would have like?

// Smooth scroll Function 

$(document).on('click', '.menu-item a ,  #menu-one-page-menu a ', function (e) {
    if ($(e.target).is('a[href*="#"]:not([href="#"]')) {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            || location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top

                }, 1000);
                return false;
            }
        }
    }
});
jquery

1 answer

2


Here is a very simple example, first you select your element alvo then just perform an animation in body e html leading the scroll to the target element. Set a time of 600ms but can be edited. Simple like this!

$('#link').click(function(){
    var alvo = $('#alvo');
   $('body, html').animate({ scrollTop: alvo.offset().top }, 600);
   return false;
})
<a id="link"> Clique! </a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="alvo"> target </div>



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

If you want, you can also perform the effect by passing some value inside the function scrollTop as follows:

$('#clique').click(function(){
  $('body, html').scrollTop(100)

})
<a id="clique"> Clique </a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div>teste</div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.