Link to a certan view on a page

Ask the Community Get Answers
1

Hi All,
anyone know how to set a link to a certain position on a page? I have a client with a very long page and he wants links at the top to the different views on the page to avoid endless scrolling. I have suggested tabbed child pages but he wants it all on one page. Any suggestions?
Thanks

2

Hey @Hugo, not in front of my computer, but I imagine some JS generated buttons that each reference a view key on the page, and when any are clicked, it scrolls to the Y-position of that view.

3

Thanks Stephan, somethig like that is what I had in mind. I was hopig someone had done the same and had some easily replicatable code - being a JS simpleton though it would need to be easy to implement!
Cheers.

1 Like
4

It’s even easier than I thought:

  1. Add a menu view to the top of the page

  2. For each shortcut button you want, insert a Link to URL button and add the following code, making sure to adjust to your intended view key where you want to scroll to on the same page:
    javascript:scrollToView('view_xx');

    image
    image550×206 11.6 KB

  3. Insert this scrollToView function in your JS editor:

window.scrollToView = function(viewKey) {

  const $target = $(`#${viewKey}`);
  if ($target.length) {
    $('html, body').animate({
      scrollTop: $target.offset().top - 50
    }, 500);
  }

}

You should get a result like this:
scrollTo

That was fun. :slight_smile:

5 Likes
5

That’s a great solution :man_technologist:

1 Like
6

Awesome, Thanks for that, perfect and very useful. Surprised it’s not been asked for before!

1 Like
7

Hi Hugo,

It’s not directly related, but you may want to check out this option in the KTL: _bm keyword.

It adds the possibility to add any page as a bookmark that will appear on all pages, either at top or bottom.

You can also decide on which page you want them.

See the documentation here: Keywords · cortexrd/Knack-Toolkit-Library Wiki

It will look like this:

image
image1914×1071 188 KB

Norm

8

Thanks Norm, very neat, even if not the solution for this use case. I’ll no doubt be making use if this one soon enough!
Cheers, Hugo

1 Like
9

Hey @Hugo , I have an open source Scroll-To bar that automatically shows up on pages and sticks to the top as you scroll down. You can check it out here: GitHub - ivojolo/knack-customizations

It looks like this:

image
image1106×488 18.2 KB

Note that it currently shows a scroll-to option for some views that don’t have a title, which I’m working on fixing. Anyway, you can try it out at your leisure!

1 Like
10

Hello, Stephen! I tried cutting and pasting per your instructions above, but no joy so far. The menu was set up as above, with view names added; but after adding the JS function to the editor, no change, no response from the menu buttons. So I think my issue is the code in JS. Does any of the scrollTo function need to be edited or replaced?

11

@Joseph7 I’ve just DM’ed you for a diagnosis, and then we can come back here with the result.

1 Like
12

Nice one, thanks @ivan !

13

Hi Stephen did you manage to diagnose the issue with this. I am having the same issue using the above code?

14

@Steve14 - yes, @Joseph7 and I just finished troubleshooting this today. It looks like the browser wasn’t recognising the function for some reason.

I have updated the function code in my original post, with first line being changed to:

window.scrollToView = function(viewKey) {

Hope that works for you!

1 Like
15

Works perfectly now. Thanks for sharing I have multiple pages I believe this will be useful on.

1 Like