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

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus » Sun Aug 18, 2019 3:20 pm

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.

Image

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
Last edited by Markus on Fri Aug 23, 2019 5:31 am, edited 3 times in total.

User avatar
Pablo
 
Posts: 17608
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: A link to the first element (anchor) does not set view fully to top

Post by Pablo » Sun Aug 18, 2019 3:40 pm

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.

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: A link to the first element (anchor) does not set view fully to top

Post by Markus » Sun Aug 18, 2019 3:55 pm

Thanks for clarify this, Pablo.

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: A link to the first element (anchor) does not set view fully to top

Post by Markus » Sun Aug 18, 2019 5:06 pm

I found a solution for my problem.

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

Image

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: A link to the first element (anchor) does not set view fully to top

Post by Markus » Sun Aug 18, 2019 7:47 pm

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.

Image

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

User avatar
Pablo
 
Posts: 17608
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: A link to the first element (anchor) does not set view fully to top

Post by Pablo » Sun Aug 18, 2019 8:13 pm

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.

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: A link to the first element (anchor) does not set view fully to top

Post by Markus » Wed Aug 21, 2019 10:26 am

I understand. Thank you for your explanation.

User avatar
BaconFries
 
 
Posts: 4635
Joined: Thu Aug 16, 2007 7:32 pm

Re: A link to the first element (anchor) does not set view fully to top

Post by BaconFries » Wed Aug 21, 2019 11:15 am

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

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: A link to the first element (anchor) does not set view fully to top

Post by Markus » Thu Aug 22, 2019 2:12 pm

Great, thank you for the link, BaconFries.

I will investigate the article before I finetune my page.

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: A link to the first element (anchor) does not set view fully to top

Post by Markus » Thu Aug 22, 2019 5:32 pm

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!

Image

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.

Image

So that was a good hint, BaconFries! :D
Last edited by Markus on Fri Aug 23, 2019 5:32 am, edited 1 time in total.

User avatar
BaconFries
 
 
Posts: 4635
Joined: Thu Aug 16, 2007 7:32 pm

Re: A link to the first element (anchor) does not set view fully to top

Post by BaconFries » Thu Aug 22, 2019 9:28 pm

Glad it worked for you.. 😃

User avatar
Markus
 
 
Posts: 88
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

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

Post by Markus » Fri Aug 23, 2019 10:55 am

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>
Image

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

Image

Post Reply