Menu icon Foundation
Make button scroll to div as Magellan does?

I am using the Magellan sticky nav for a single page portfolio site I'm building. The Magellan sticky nav is working fine itself, but I would also like a button to trigger the same action/animation to scroll down to the next div. In this case, this is the button at...

.landing .landing-content a

Currently it's moving to the next div, but there is no animation. It's just an instant 'jump' down the page to that div and I would like it to scroll the same way it does when I hit the "About" button in the Magellan stick nav. Is there any way to do this?

# HTML File

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd data-magellan-arrival="My-Name"><a href="#My-Name">My Name</a></dd>
    <dd data-magellan-arrival="About"><a href="#About">About</a></dd>
    <dd data-magellan-arrival="Projects"><a href="#Projects">Projects</a></dd>
  </dl>
</div>
            
<div class="landing">
  <a name="My-Name"></a>
  <div class="landing-content">
    <h3 data-magellan-destination="My-Name"></h3>
    <a data-magellan-arrival="About" href="#About" class="button success">Learn more</a>
  </div>
</div>
         
<div class="about">
  <a name="About"></a>
  <h3 data-magellan-destination="About"></h3>
</div>

Magellanbuttonscroll

I am using the Magellan sticky nav for a single page portfolio site I'm building. The Magellan sticky nav is working fine itself, but I would also like a button to trigger the same action/animation to scroll down to the next div. In this case, this is the button at...

.landing .landing-content a

Currently it's moving to the next div, but there is no animation. It's just an instant 'jump' down the page to that div and I would like it to scroll the same way it does when I hit the "About" button in the Magellan stick nav. Is there any way to do this?

# HTML File

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd data-magellan-arrival="My-Name"><a href="#My-Name">My Name</a></dd>
    <dd data-magellan-arrival="About"><a href="#About">About</a></dd>
    <dd data-magellan-arrival="Projects"><a href="#Projects">Projects</a></dd>
  </dl>
</div>
            
<div class="landing">
  <a name="My-Name"></a>
  <div class="landing-content">
    <h3 data-magellan-destination="My-Name"></h3>
    <a data-magellan-arrival="About" href="#About" class="button success">Learn more</a>
  </div>
</div>
         
<div class="about">
  <a name="About"></a>
  <h3 data-magellan-destination="About"></h3>
</div>

Rafi Benkual over 4 years ago

Magellan has smooth scrolling built in by default. If the JS is not initialized on the page, none of the JS will work.

Make sure your scripts are loaded before the closing body tag:
Javascript
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>

Doing this without magellan can be done with this snippet.
https://css-tricks.com/snippets/jquery/smooth-scrolling/

Tobias Malikowski over 4 years ago

Hey there, I'm trying to archive a similar function. I'm using Magellan which is working fine, but i also want to have a normal link withing my content which triggers the same effect as Magellan (smooth scroll to a destination).

I've tried to simulate the links in the Magellan, but it's not working:

<p>
Some Text ...
<span data-magellan-arrival="brewery-tours">
<a href="#brewery-tours">
Brewery Tours,
</a>
</span>
Some Text
</p>

Is it possible to use the Magellan effect on normal links?