Scroll to target (row)

Hi,
is there a way when scroll to target is not a bloc ? For example a row ?
thanks
tom

Hi Tom,

You can add an ID to any element in Blocs app, and then just use the regular "navigate to URL’ interaction with #idname as URL, where idname is your ID element you want to scroll to.

Cheers,
Eldar

1 Like

With help from @Malachiman I’ve targeted a specific tab!
Very clever

As @Eldar says above. Also if you want it to scroll smoothly add the following script to the page footer.

<script>
$(document).ready(function(){
   $("a").on('click', function(event) {
     if (this.hash !== "") {
      event.preventDefault();
        var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
});
</script>
1 Like

Hi
thanks @Eldar for your help. When I click on a link in the footer then I have a smooth scroll. But when I click a link in the menu I don’t habe a smooth scroll. Is there a solution for this @Malachiman
thanks for your help. Also put the code in the header ?
tom

:smile: yeah the page footer @tom2

Hi @Malachiman
sorry, but I don’t get it to work. Can you please explain how to put the code in the footer ?
tom

Really? How is that working?
Very curious :face_with_monocle:

Hi @tom2,

Using page settings…

then

(whoops, typo on that second image, should read paste the code here.)

The code should work, I have used it historically.


@pixelwork - exactly the same method as @Eldar mentioned above for jumping to IDs

1 Like

I´ll try that…
Thanks so much!

I tried the code. Works fine as long as you only target IDs on the same page but if you have links to IDs on another page, these links do not work anymore.

1 Like

That’s what the code is for. There is another code I posted the other day for opening tabs on another page. That can be modified. It grabs the anchor from the url.

That is exactly what I need and was working on to achieve today (without success). Do you still know where you answered this?

Don’t need it anymore. Found it and solved problem.
Nav scroll to target on a different page that doesn’t have the target
Answered by @Jakerlund

1 Like

yeah lol, I was thinking something else at the time :grin::crazy_face:

easy as

www.mydomain.com/mypage#myID

But if you want it to scroll smoothly to the target, you need code.

1 Like

Yes, if it is on the same page to scroll to. If it is on another page it is not needed as it jumps directly to the other page’s target.

Is there a way to let it after it found the target on the new page to scroll to the top of the page? I ask this because the individual tabs that shall be targeted are at the middle of the page, but I however want that the whole page from the top to be visible and not the tabs on top page position.

So you want it to open a certain tab, but load the page as normal at the top?

You can put this code in the page footer of the page that has the tab.

<script>
    $(document).ready(function ($) {
        let openTab = window.location.hash;
        $('.nav-link[href="' + openTab + '"]' ).trigger('click');
    })
</script>

The url ID you want to use for the link to the page ->. Select the Tab and copy the Tab content URL

myPage.html#myTabContentURL

EDIT: Fixed typo in URL example.

I want to click a link in the global footer that directs me to a different page.
On this (different) page there are 3 tabs and for example 2nd tab shall be opened and show its contents. But…
… at the same time the (different) page with the tabs shall be loaded as normal at the top.

If that is what you suggested, I tried your steps but it did not work. I also think there cannot be any forward slash int the “Navigate to URL” URL text, because it loads as text and not graphic somehow see my screenshot). Without the forward slash it shows the (different) page – just not at the top :upside_down_face:

Yes, no / after the page. Sorry I think I did a type before.

If you have cleanURLS on it would be myPage#myID

Hi @Malachiman
In a new project it work perfect. But not in my Project I am working on. I think some other code make problems …
thanks a lot
tom