Scroll down

0

I have this jquery that does scroll animation when you click on a link.

How do I click the link, the scroll will go a little further down, type a 10% down, would it have?

// 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;
            }
        }
    }
});
    
asked by anonymous 16.02.2018 / 13:49

1 answer

1

Here's a very simple example, first you select your alvo element then just perform an animation on body e html by taking scroll to the target element. I set a 600ms time but can be edited. Simple as that!

$('#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>

Ifyouwant,youcanalsodotheeffectbypassingsomevalueinsidethescrollTopfunctionasfollows:

$('#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>
    
16.02.2018 / 13:58