search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.65k stars 5.5k forks source link

[Magellan] Smooth scroll requires URLs starting with #. Absolute Paths fail #7648

Closed simonschaufi closed 8 years ago

simonschaufi commented 8 years ago

My CMS creates absolute links, even to sections. Instead of links like <a href="#first">First Arrival</a> it creates links like this: <a href="/#first">First Arrival</a>

How can we reproduce this bug?

  1. Add a Slash before the hash in the menu to make the link absolute like so: <a href="/#first">First Arrival</a>
  2. Click on the link

What did you expect to happen? I expected to scroll smoothly down

What happened instead? Instead i jumped immediately down to the target

Test case Sorry, making links absolute on codepen break the system - no demo...

Here is the code line that is making this problem: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.magellan.js#L126

zurbchris commented 8 years ago

So, magellan is designed to navigate to an element on a page based on id's, not absolute paths as that could cause problems with other things. I'm going to chalk this up to a CMS issue and not Foundation.

simonschaufi commented 8 years ago

I think that Foundation should just grab the hash and don't care about what's in front of that. Could you please tell me what side effects this could have as I have no idea what you are talking about.

simonschaufi commented 8 years ago

well, before (version 5) it was possible to make this workaround:

<li data-magellan-arrival="top">    
    <a href="/#top">Home</a>
</li>

but since the data-magellan-arrival was removed, this doesn't work any more.

folamola commented 6 years ago

Hi, try this instead of Magellan.

http://jsfiddle.net/dizel3d/1eamwt4e/