Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Chris Cooper
Chris Cooper
23,959 Points

Foundation 5 tabs deep linking opening halfway down the page

I have 2 enquiry forms at the bottom of my webpage using foundation 5s tabs.

I want to link to these using a button further up the page, which i can do by adding the data-options="deep_linking;true" to the ul.tabs.

Then when i link to the tab content with the correct id from the button at the top of the page it works great. However when i try and open the page it automatically loads the page halfway down, so i would have to scroll back up to the top.

Webpage is: http://http://chris.cars2.co.uk/new-cars/hyundai/i10/

Any ideas why this is happening and how to fix it would be amazing!

Thanks

1 Answer

Stephen Van Delinder
Stephen Van Delinder
21,457 Points
Stephen Van Delinder
Stephen Van Delinder
21,457 Points

I'd have to see the actual code to know for sure, but I've had similar issues before and here are the causes and solutions:

1: The function is being triggered by the wrong event. If the handler that calls that function is a page load event, then it will cause the page to load in the middle. Ensure that the function is called only when the element you would like to trigger the function is clicked.

2: The function doesn't prevent default behavior correctly. In the course of the function, the normal behavior is not canceled. I've fixed this issue before in one of three ways.

Prevent Default event method.

Stop Propagation event method.

Or by returning false on the last line of the offending function to ensure that the event loop stops, but that only works in jQuery.

I hope this helps.