Animated scroll for onepage sites

Bootstrap Studio Help
1

Is it possible to create a scroll down button that can scroll down my site like this one: https://codepen.io/anon/pen/ZxwzLW

If so... Then can anyone please explain to me how?

2

Look at the example you gave.

In the HTML pane, each section contains an ID and the link in the section links to the next section's ID. That's a normal in page linking mechanism.

The next thing is the JS pane. The JS simply animates the scrolling between each section. So you can literally use the JS code as is. Just copy paste into your custom JS file.

You then just need to add an ID to each of the sections (here a section doesn't have to be the literal section element it can be any element in the page) in your project that you want scrolling to too occur. Then set your links to the corresponding ID you want the clicked link to scroll to.

Saj

3

So apparently, the version of jQuery doesn't like the $('a[href*=#]') selector so if you change it to something like..

$(function() {
  $('.demo a').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});

that will work.

Personally I'd probably add a class to the link that causes the scroll so it's better selected. Something like scroll-link for the class on the link.

$(function() {
  $('.scroll-link').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
  });
});

Saj

1 Like
4

see this

5

Yes, that’s work fine. But the scrollTop fails if the href is an anchor to another page (“index.html#myanchor”)… too bad … I did not find an easy solution for this.
Example of use : you have 2 pages, index.html and other.html, and your menu is inside index.html. If your menu contains a link that refers to anchor like “#contact”, it works. But if you changed page to other.html, then you would like that the link refers to “index.html#contact” ; in that case scrollTop fails.

6

Please have pity on us regular users and not bring up threads this old to post information that by this time has changed so much. There are also Online Components for this situation as well that take care of this. Thanks :slight_smile:

7

@jo-r read my mind. A three year old “solution” may not even be relevant today. Just more chaffe among the wheat of this Forum category. “Oh moderators, where art thou???”