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 :).
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.
Click 'Save' and you're done! Enjoy!
Neat Huh? Now click on this link to go back to the top: Take Me Back To Top!
Comments
Hi guys,
I would love to use this on my blog, but there is nowhere logical to put the second link ... for example just before the comments form: I can't edit the page, only the blog itself. Could you incorporate it into the blog format? On this site too I have to scroll down on some of the longer blogs and forums when reading through them. What do you think? Also, is it possible to use this formula to link to another page on my site. I would like a link on my 'home page' to link to another on my 'useful links' page.
Renée Paule
Hi Renée,
These types of links really aren't used that often, and definately not enough for us to implement them into our framework - sorry :).
You can place them any place in your blog content or on any page - that will probably be where you would use them anyway 99% of the time.
ok thanks Heath ... just a thought. Oh and by the way ... I LOVE the forms .. they are so easy to use.
I give up with this Heath and Ben. I have no idea how to create the original links. Have been trying on http://www.falconryfriends.com/home/test_page<p>En Français</p> with no luck at all I there is nothing marked href anywhere. I want to create links to scroll down to French translations on some of my pages.
<p>
<script type="wrappedobject">//<![CDATA[
<iframe src="http://www.google.com/calendar/embed?height=700&wkst=1&bgcolor=%2399ff99&src=vigoureux.gibson%40gmail.com&color=%232952A3&ctz=Europe%2FParis"; style=" border-width:0 " width="480" height="700" frameborder="0" scrolling="no"></iframe> //endwo]]></script>
</p>
<p>In English</p>
Help please.
Thanks
RP
Not sure that is all clear. The problem is that i can't create the first two links???? they have the same URL????
Hey Renée,
I'll shoot you an email... I'm not sure what your trying to do here...
Hi Heath,
Is it possible to link from one page to an anchor link on a completely separate page? Or does the anchor link have to be on the same page as the original link? For example, we have a web page for a book we are publishing, and I would like to link from the list of authors on the home page to where each author's bio appears on the separate "author bios" page. Thank you.
Hi Philip,
Yes, this easy to do. Just add #(and the id) to the end of the page URL you want to use. Here is some example code that used the 'link1' id above:
http://pastie.org/738963
Heath;
I have the same problem that Renee described on May 28, 09. You did not respond in the blog how to address that. In trying to establish the first link, I do not get href. When I try typing that in, it doesn't help. Any thoughts?
Rick
Hi Rick,
Are you doing this through the 'html' code view?
Heath,
I spent some more time, and actually got it to work. Wow! So now, how do I get this to link to another page?
To create a link to a different page just highlight the word and click on the 'chain link' button in the editor. Paste in the URL to the page there.
Thanks a lot for this. I have been looking for this tecnic in spanish but could not find it.
Great, thanks for the info - very helpful code!
thank u so much!it worked for me :)
I have read through this topic several times ... I just don't get it! I am trying to create links that scroll down the page in a newsletter. I have the topics under the newsletter header and I want them to jump down to the topic title when the reader clicks. Sounds like exactly this topic.
I don't get how to create the FIRST link??? How do you do that?? Be gentle I know nothing about html coding.
what about linking to an anchor in another window?
You can create a link to a new window by clicking the "Open in New Window" Checkbox
Hi.. I am trying to do something similar and am hoping you know if this is possible. I have a display area at the top of the page, then a large area that has a <div overflow. The idea is that the information at the top of the page stay in view while the information in the overflow is scrollable.
If someone clicks on an area in the overflow it changes the display at the top. This all works. Now I'd like to make it so the clicked field in the overflow (scroll) area moves to the top of the scroll area.
I first implemented this with the # as you described above but as you can imagine the page scrolls up and now the display area is no longer visible. Is there anyway to have it only scroll within the scroll area not the page?
Judy, it sounds like you might be trying to make something harder than it needs to be. The 'display area' is different on every laptop, computer, mobile phone, etc. You should consider working within the constraints of natural web design and embrace usage of the vertical scroll for the whole page (not just a div).
Cant find any way to purcahse anything from this site????
I hope this post isn't dead because I need help. When I used this, it works except it opens it in a new tab. Anyway to make it just scroll down or whatever?
The code I provided will not open your link up in a new window unless you modified it. If you did not, it might be a browser setting. Try a different browser and see if it still does the same thing.
Same problem as Carolyn. I pasted into my blog PAGE text full of anchors from an HTML page where the anchor links work. But in the blog page, using both the latest Safari and Firefox browsers, ALL the anchor link actions open a new window/tab in presenting the correct action result.
Found the problem. It was an SEO setting. Apparently, I was unaware it was a global action setting.
Thanks for making my life a whole lot easier! Very simple and to the point. I wish I would've found this article a few hours ago... :)
At last I got it right. But I didn't do it on a post but a site you can check it out wwsurfers.blogspot(.)com Its lovely I also used image and not text. Thanks Huffman, I was only able to do this cos your tutor was just explanatory.
i love you! :)
Post a Comment