ScrollToTop - not to the top but 2nd bloc [SOLVED]

Hi everyone,

how can I tell “ScrollToTop” to go to the 2nd bloc where the menu is, and not the top one (hero bloc).

Thank you !!

perhaps just select that bloc ID you want the trigger to ‘scroll to’ and don’t use the ‘scroll to top’ option in the interactions?

Thank you @DanielF, but “Scroll to Top” Button is not in the interactions, but in the page settings unfortunately. I would use Scroll to target otherwise.
I need the “Scroll to Top” button to go to the second bloc, or I need to create a button to do it, that would be the other option.

1 Like

Yeah that would be the way to go.

You could modify something like this, to look for the ID of the bloc you want to scroll too.

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

1 Like

oh yeah…that’s right…hope the solution malachiman provided works! or just the custom button option

Great, thank you @Malachiman ! This should do the trick !

I have tried to implement this following code but it doesn’t work for some reason…
I have created a brick with the html code, and added the css & js code to the “settings header code” but it doesn’t work… :thinking:

Hi @chrishsl

You could apply if a couple of ways. This is what I would probably do.

Add an attribute to the button to trigger a function (in blocs you can do this using the right sidebar.

<a id="button" onclick="triggerscroll()"></a>

Then add the function to the code (remove the other scrolling code)

Change the “scrollhere” to the ID of the bloc you want to scroll too.

function triggerscroll() {
  var scrollTo = document.getElementById("scrollhere"); 
  scrollTo.scrollIntoView({ block: 'start',  behavior: 'smooth', });
};

I would probably avoid using “button” as well, as its very generic you might have a conflict at some stage. Using something more descriptive might be a good idea. You actually don’t even need to use an ID, you can just use classes for the button.

<a id="scroll-to-top" onclick="triggerscroll()"></a>
2 Likes

Thanks a lot for the code !!! It is working !

I’ve just realised that I had to put the JS code in the footer for it to work, I was trying in the Header instead.

1 Like

the scroll speed doesn’t seem to work on Safari, but no problem on Firefox & Chrome. On safari, it goes straight to bloc ID…

Hey @chrishsl,

Oh yeah. Seems like there isn’t full browser support for “scrollIntoView” in safari and iOS at the moment, which is a shame.

Back to using the original method then. As above, change the ‘scrolltohere’ to the ID you want to scroll too. Change the 800 to change the speed of the scroll.

function triggerscroll(e) {
  var target = $('#scrollhere');
  event.preventDefault(e);
  $('html, body').animate({
        scrollTop: (target).offset().top
    }, 800,)
};

If you want to add some offset from the top of the screen you can add a negative number (which is pixels after the word top… eg this would offset the target ID from the top of the screen by 100px.

        scrollTop: (target).offset().top -100 }, 800,)
1 Like

Thanks again @Malachiman !!! working on all browsers now

1 Like

Thats great! Glad it’s working for you.

eimm… is this also an answer to my “'missing the Bloc ID’s to target to”?
I have one bloc in the top that’s no. 1, and one at the bottom no. 80. And in between no numbers. And the number of blocs in between is not 79. :wink:

Post Removed - posted in wrong thread in error

1 Like

You can change the ID of the blocs to anything you want (no special characters though, or capitals). And yes you won’t be able to target a bloc without an ID.

okay! I expected it be an automation. thnx !!