How did I do that you ask? I have had this question asked of me several times by the Doodlekit community, so I finally gave in and posted the solution :). We want the users of Doodlekit's free website maker to be able to do the things they need to do to on their websites.
At some point you may wish to create a link or anchor on a web page that takes you to the bottom of the page automatically. Or you might just want it to scroll you midway down to a certain point. These types of links are called "Internal Anchors" and they are easy to create.
First, these links can only go to other links. So you must create two links - one link the user clicks on and the other link that the user will automatically be scrolled to. Go ahead and do this first.
Second, you're gonna have to look at code (It's OK! This will be easy!).
Highlight your first link in the editor and then click on the 'HTML View' button to see the code. You will need to 'tweak' the code a bit. Here is the example code for the link above:
<a href="#link1">Take me to Link 1</a>
In the 'href' value, put a '#' followed by the name of the link you will link to. In this case, I named the link below 'link1'.
Go back to 'Edit View'.
Now scroll down to the second link. Highlight this second anchor and then go into 'HTML View'. Here is the code for the destination link that you want the previous link to take you to :
<a id="link1">Link 1</a>
Here you add an 'id' attribute and.... (drum roll) you give it the same name you told it link to from the first link. Always make sure the ID is unique. DO NOT PUT IN THE '#' AS PART OF THE ID! If you want it to actually link to something, you can, of course, by adding the href attribute and giving it the URL you want it to link to. If this link is just a place holder for you to scroll down to, you can just leave out the href all together. This will make the link do nothing when it is clicked.
Doodlekit
DoodleKit™Free Website Builder
Sign Up Free Now!Auto Scroll Down Links (Internal Anchors)
Heath Huffman
02/17/2009 10:37AM
Before reading this, click here to make sure you are at the actual blog post... not the 5 post preview:
Click on this link: Take me to Link 1
How did I do that you ask? I have had this question asked of me several times by the Doodlekit community, so I finally gave in and posted the solution :). We want the users of Doodlekit's free website maker to be able to do the things they need to do to on their websites.
At some point you may wish to create a link or anchor on a web page that takes you to the bottom of the page automatically. Or you might just want it to scroll you midway down to a certain point. These types of links are called "Internal Anchors" and they are easy to create.
First, these links can only go to other links. So you must create two links - one link the user clicks on and the other link that the user will automatically be scrolled to. Go ahead and do this first.
Second, you're gonna have to look at code (It's OK! This will be easy!).
Highlight your first link in the editor and then click on the 'HTML View' button to see the code. You will need to 'tweak' the code a bit. Here is the example code for the link above:
In the 'href' value, put a '#' followed by the name of the link you will link to. In this case, I named the link below 'link1'.
Go back to 'Edit View'.
Now scroll down to the second link. Highlight this second anchor and then go into 'HTML View'. Here is the code for the destination link that you want the previous link to take you to :
Here you add an 'id' attribute and.... (drum roll) you give it the same name you told it link to from the first link. Always make sure the ID is unique. DO NOT PUT IN THE '#' AS PART OF THE ID! If you want it to actually link to something, you can, of course, by adding the href attribute and giving it the URL you want it to link to. If this link is just a place holder for you to scroll down to, you can just leave out the href all together. This will make the link do nothing when it is clicked.
Click 'Save' and you're done! Enjoy!
Link 1
Neat Huh? Now click on this link to go back to the top: Take Me Back To Top!
Related Posts