[Pro] Ever thought about anchors in responsive layouts?

Freeway
1

I am testing new responsive layout techniques and came across the subject anchors. Ever thought about anchors in responsive layouts? Nor did I.

You all know one page websites, where you can skip from a link to a section beneath. But how one use it to skip PRECISLEY to the beginning of a box /section?

Till now I made anchors with textlinks.
But this depends on the place of the text, what if – like always in responsive layouts – is not the top of a box. Pitty. What can we do?

And furthermore in „lower“ media width tabs the layout changes…
I hope I can get my idea across to you…

I have set up an example, but till now without anchors. Just to let you see, what I mean. Perhaps one would not use anchors at all,…please share your ideas with me.

Link

Thanks a lot in advance.
Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

What you call “anchors” in Freeway are just id tags…

<div id="mysection">

ID tags in Freeway are Item Names… Freeway sets them automatically as
unique names (m1, m2, item1, etc.) but you can also set the name via the
inspector. If you want to set your link to a particular object or container
on the same page, you would set the target of your link in Freeway as
#mysection. Freeway then generates the html like so…

<a href="#mysection">Go to this section</a>

When that link is clicked, the browser should scroll until the top of that
#id item is at the top of the browser window. That’s all there is to
“anchors”. Please keep in mind that you cannot get the bottom of a document
to scroll to the top of a browser window.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Hanna,
You can also target the ID of any item on the page;

<a href="#Box2NoColour">Orange Box</a>
<a href="#Box1Blue">Blue Box</a>
<a href="#Box3Grey">Grey Box</a>

Regards,
Tim.

On 17 Feb 2015, at 12:43, sonjanna wrote:

But this depends on the place of the text, what if – like always in responsive layouts – is not the top of a box. Pitty. What can we do?

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Wow, Ernie and Tim.
What qualified and super quick answers the forum can provide, again I am deeply impressed. This helps a lot!

Still “speechless” - would yo say so in english? - and thankful.
Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hmmm, it works like a charm ( see example) , but unfortunatly the top of the section is more or less 24 pixel beneath the browserwindow (on all breakpoints)… I would love to be able to let scroll to the top.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

The Smooth Scroll JavaScript you are using has an option to scroll to a fixed position offset from the anchor point. Your page it is scrolling to 20px above the target;

Effect.ScrollTo(t, {duration:'0.6', offset:-20});

Set the offset to 0 and the page will smooth scroll to exactly the item you specify in the anchor.
Regards,
Tim.

On 17 Feb 2015, at 13:25, sonjanna wrote:

Hmmm, it works like a charm ( see example) , but unfortunatly the top of the section is more or less 24 pixel beneath the browserwindow (on all breakpoints)… I would love to be able to let scroll to the top.

FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Sorry Tim, I missed that. Silly me. Thanks for the reminder.
Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options