Menu icon Foundation
Scroll to a div through an anchor tag?

Is it possible to create an anchor tag that will animate a scroll till a specific div? Just like in the magelan nav or the joyride example but without those.

Thanks in advance!

scrollanimate scrollscroll tovertical scroll

Is it possible to create an anchor tag that will animate a scroll till a specific div? Just like in the magelan nav or the joyride example but without those.

Thanks in advance!

Raphael Durrer over 5 years ago

magelan should do this job with minimal markup.

Chelsea K Potts over 5 years ago

You can create the named anchors the same way as usual just add data-ajax="false" to the anchor.

Wing-Hou Chan over 5 years ago

Hey Eddie!

Here is a script for smoothscroll, which I think is what you want:

$(function(){$(".scroll").click(function(){$("html,body").animate({scrollTop:$("#target").offset().top},"500");return false})})

Replace .scroll with a class of your own or use .scroll. Whatever class you use must be applied to the anchor which is going to be clicked. #target sets the destination. Use your own id or use #target. #target must be applied to the destination. The number is the time taken for the animation to complete in milliseconds; change it to whatever you want.

Tomaž Ščavničar over 5 years ago

I've tried to achieve the anchor tag scrolling on a orbit slide and I've got false coordinates from offset().top property.
So my scenario is that I have 3 div elements with the height of screen on orbit slide and I have arrows for scrolling down when clicked. When I have those three div elements in the orbit slide the offset().top gives me coordinates that are not related to the screen.
Has anybody a consistent solution how to achieve on click vertical scrolling in orbit slide?

Nikolaus Niedermeier over 5 years ago

Could you please post your code snippets (HTML & JS), so that we can have a look.

Alan Ashbaugh over 5 years ago

The scrolling works, but the duration value doesn't seem to have an effect when it is changed. It's always the same duration (short).