How to add the auto-scroll effect that works by clicking buttons

1

I want to add the Auto scroll effect as in the demo portfolio page provided by FreeCodeCamp .

2

Hi,

You can do it with the JavaScript. Study the JS of the demo. The last block in JS panel does what you want:

$(function() {$('body').on('click', 'a.scrollable', function(event) {
  var $anchor = $(this);
  $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top},1500,'easeInOutExpo');
  event.preventDefault();
  });
});

You need to apply class scrollable to the menu links. Then, the href value of those links need to match with id values of respective sections and then it should work.

Hope that helps :slight_smile:

1 Like
3

I don’t know JS.
should I just paste this code in the JS panel and add href="#id" and class=“scrollable” ?

4

Yes, you can try doing that. It should work.

1 Like
5

You could try looking at window.scrollBy() or window.scrollTo(). These are useful JavaScript commands that help you deal with scrolling. I imagine you could write a function that slowly scrolls by a certain amount…

1 Like
6

No. I can’t write one . However the problem has been solved but thanks for your help and