Scrolling to specific point in the page with anchor points
As simple as it can get, a couple of mistakes here and there will take you forever to get it right. Scroll to a specific points of the page using anchor-links are in high demand right now. Just some straightforward instructions and good-to-know stuff. :)
1. Of course, attached the latest jquery file.
2. We're using the Ariel Flesher Scrollto Plugin and localScroll Plugin (click link to download) It can run with or without the localScroll plugin -- localScroll
3. Then set up the html. Under the links, (when you click on a button, it brings you a certain part of the page - referring to the button here.) href to the element on the page you are referring to.
Brief Intro History Benefits
These three links here will bring us to div with id=briefIntro, history and benfits respectively.
4. More importantly, these three divs must exist.
<div id="briefIntro"></div> <div id="history"></div> <div id="benefits"></div>
** IMPORTANT -- the three div must float, individually so that the window/page will scroll the element to the top of the page. If they are floated as a group, the script will detect the top of the element as the top of the group -- which create inconsistency.
5. Now for the jquery bit.
$(document).ready(function(){ // Scroll the whole document $('#aboutMenu').localScroll({ target: 'body', }); });
First line, executes the script only after the document is loaded. **the browser needs to collect information on the links first before execution.
Second line (excluding comment), identifies where all the links are hosted, in this case, in a div with an id of aboutMenu. Attach the localScroll plugin to it.
Third line identifies the area that we are scroll through, i.e. the whole page/window.
5. If there are multiple links we are scrolling to, use this instead. This identifies all the links on the page with anchor links and scroll directly to it.
$(document).ready(function(){ // Scroll the whole document $.localScroll({ target: 'body', }); });
That's all. However, most importantly, float them separately to prevent problems and headaches.
