*** SOLVED *** A link to the first element (anchor) does not set view fully to top

[Markus]

WebBuilder 15.0.6 x64 / Windows 7 x64 SP1 / Browser: Google Chrome clone ("Iron") 72.0.3750.0 x64

Hello Pablo,

I have a question about the positioning of the view when using a link to an anchors.

Given is a OnePager that (apart from a "sticky" menu in a masterframe) starts directly with a LayoutGrid (this one with the shaking hands image).

If I put an link (including an anchor) to this LayoutGrid, then the viewport is not set to the upper edge, but a few pixels lower when this link is selected.



The same happens when I show the imprint (German: Impressum), which is a separate subpage. But even there the target of the link (anchor) is the first element of the page (a LayoutGrid).

The link target (LayoutGrid) uses a top padding of 60 pixels, but reset this value to 0 does not have any effect.

You can also follow the behavior on your following template: http://www.wysiwygwebbuilder.com/suppor ... ml#welcome

If you scroll down the page and then click on the menu item "Explore Delft", the page will not be scrolled to the top, but only slightly below it.

How can I achieve that the viewport is fully scrolled to the top when selecting the first page element?

It works if I only enter the page name as link and do not use an anchor, but then the whole page is completely reloaded and the highlighting of the selected menu item no longer works.

I am very grateful for help.

Regards
Markus

[Pablo]

This is standard HTML behavior.
The header is a sticky element, this mean that it will act as a floating element until it moves.
So, the anchor will be at the top of the relative position of the layout grid. This is not the top of the page.

[Markus]

Thanks for clarify this, Pablo.

[Markus]

I found a solution for my problem.

The setting "Bookmark/Offset" in the LayoutGrids properties is my friend for this case.

[Markus]

Sorry for the tripple post.

I thought I could solve the problem, but unfortunately there is now another problem.

It's about the same website. I now work with the scroll offset of the LayoutGrids as described above to display the content correctly in the view.

The (demo-)OnePager consists of two separate pages (except for the masterframe). At first the index page on which the sections are placed and second the separate imprint page.

If I now navigate within the index page via menu items, then all sections are displayed correctly.

But if I switch to the imprint page (this page is called without an anchor) and then switch back to the index page (the link now points to the anchor of the first element of the page), then the scroll offset will only be considered correctly after the second click on the menu item.



What could be the reason for this?

I've tried a lot of things now, but I can't get any further.

I would be happy about help.
Thank you very much.

Markus

[Pablo]

The offset is controlled by JavaScript which monitors clicks on the page.
If you come from another page then the script will be bypassed and the browser will directly go to the anchor.

[Markus]

I understand. Thank you for your explanation.

[BaconFries]

Came across this maybe it will help with what you are asking.
https://www.caktusgroup.com/blog/2017/1 ... n-anchors/

[Markus]

Great, thank you for the link, BaconFries.

I will investigate the article before I finetune my page.

[Markus]

That works for me. I tested it in a small testproject.

I have to use special HTML elements as bookmark targets
The first HTML element include also the style code for all following bookmarks:

Code: Select all

<style>
.Offset30 a {
  position: relative;
  top: -30px;
  }
</style>

<div class="Offset30">
  <a name="Anchor1"> </a>
</div>

Every following bookmark should look like this:

Code: Select all

<div class="Offset30">
  <a name="Anchor2"> </a>
</div>

The projekt looks like this and the menu links targeting the HTML elements instead of the Text elements!



Its working like a charm. Please notice that the links 3 and 4 are targeting the Text elements, so they are not aligned correct. Links 1 and 2 are using the HTML elements and are aligned perfectly.



So that was a good hint, BaconFries!

[BaconFries]

Glad it worked for you..

[Markus]

Addendum: I just learned something new again.
To make it work with ScrollSpy menus, you are not allowed to use a HTML element as Anchor, but exclusively a bookmark element.

The first bookmark element has to be extended with the following HTML code.

Before Tag:

Code: Select all

<style>
.Offset30 a {
  position: relative;
  top: -30px;
  }
</style>

<div class="Offset30"> 

After Tag:

Code: Select all

</div>

For all following bookmarks:

Before Tag:

Code: Select all

<div class="Offset30"> 

After Tag:

Code: Select all

</div>

The menu links have to point to the bookmarks only and not to other Element labels.