简体   繁体   中英

How to make jQuery Scrolling Top to bottom and Bottom to Top Slow Animation on Landing page menu

I am creating a Landing page website. Nav link is working when click on it it's goes to bottom and then bottom to top. But i want to make it slow with jQuery Animation. Please check my code and tell me where i am wrong. Thank you.

// Smooth Scrolling nav links
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top,
        scrollBottom: target.offset().bottom
    }, 1000);
} });

The code is fine and works, you simply forgot to put a comma after target.offset().top

Have a look here for a demo: https://jsfiddle.net/L02tck8x/

You can also try like below

HTML:

 Link: <a href="#toBottom" class="toBottom">Scroll to Bottom &darr;</a>
 Target: <a name="toBottom"></a>

 Link: <a href="#toTop" class="toTop">Scroll to TOP &uarr;</a>
 Target: <a name="toTop"></a>

JS

$('.toTop ').click(function(){
  $("html, body").animate({ scrollTop: 0 }, 600);
  return false;
});
$('.toBottom').click(function(){
  $('html,body').animate({scrollTop: $(document).height()}, 600);
  return false;
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM