Scrolling to Section/ Content Area without navigation

Support
#1

Me again ^^

Just a short question (I hope…).

I setup a page when I cklick a button it scrolls to a certain content area via the ID.
But the scrolling will leave space above and is not centering my content (slider).
I guess its because it normally subtracts the scrolling from the top menu bar.

See here:


pw:Anton

I guess the scrolling should go about 50 px more down or just not include the space of the top navigation. Is there any solution?

Thanks for any help :slight_smile:

#2

Hi there,

Thanks for posting in.

Are you referring to the buttons? They scroll in the correct position since the menu is fixed position. And yes, it’s only the one-page navigation has the correct positioning since the dimension of the header is part of the calculation. It’s different from an ordinary link (simple anchor links).

Perhaps you can provide some screenshot? It really looks aligned on my end.

Thanks!

#3

Thanks for your answer!

I might be fussy, but on the bottom it cuts off some parts of the Slider. See the two screenshots.

This is the scrolling when I click on the Link to the Content ID:
(See the four pictures in the top Section)

This is how it should be:


pw: Anton

Thanks for help!!

#4

Hi There,

Please remove the 45px padding from the first section.

Let us know how it goes.

Thanks!

#5

Tried it. Unfortunately, it is not working :frowning:
Played already with the margin and padding of all sections and contents. No success.

It seems it scrolls exactly to the top of the Content-box where the transparent sticky navigation ends. But it should start at the top of the screen.

I´m grateful for more ideas.

Lovely Greetings,
Lars

#6

Hey Lars,

Please remove the einrichtung1 ID of the content area element. You should be adding it to the section settings instead. And by the way, do not forget to remove the padding of the section where you have added the einrichtung1 ID.

Please let us know how it goes.

#7

Hmm, still doesn´t work.
I have really no idea :confused:

#8

Hi THere,

In that case please provide your login credentials so we can take a closer look.

Thanks!

#9

OK, thanks.

Its basically this page:


pw:Anton

I put the login in the secure note. Thanks.

#10

Hi Lars,

As stated by Rad previously, that is how it works by default when using fixed/sticky header. It will scroll just below the header and avoid overlapping of content. Now, to change it and make the content scroll behind the navigation, on Cornerstone > Custom JS - try adding the following JS code:

jQuery(function($){
  $('a[href*="#"]').off('touchend click');
  $('a[href*="#"]').on('touchend click', function(e) { 
    e.preventDefault();
    var id = $(this).attr('href').split("#").slice(-1)[0];;   
    var theid = $("#" + id);
    console.log(theid);
    if (theid.length === 0) {
        return;
    }
    
    var pos = theid.offset().top + 40;
    $('body, html').animate({scrollTop: pos}, 1000, 'easeInOutQuart');
    return false;
  });
});

See this: https://screencast-o-matic.com/watch/cFVOVXoO8X
Feel free to adjust 40 to find correct position of the scroll.

Hope this helps.

#11

Hi Lely,
wow, thank you for the code and the video! That works!!!

All of you guys doing such a great job with the support. I´m really amazed!
Hope you are all well payed :smiley:

Best wishes,
Lars

#12

Hey There,

You’re welcome! We are just glad we were able to help you out.

Cheers.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.