•      
  • Doodlekit
  • Features
  • Examples
  • Pricing
  • Blog
  • My Sites
  • Search
  • Support
  • Cart
  • Login
  •      
  • Features
  • Examples
  • Pricing
  • Blog
  • My Sites
  • Search
  • Support
  • View Cart
  • Login
     

Doodlekit

DoodleKit™Free Website Builder

Sign Up Free Now!
 Back to Blog

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:

<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!

Link 1

Neat Huh? Now click on this link to go back to the top: Take Me Back To Top!

 Related Posts

  • Doodlekit Gets A New Layout!
  • New Feature - Doodlekit Domain Tool
  • Scheduled Maintenance this Sunday
Tags: doodlekit, website builder, code, custom code, custom coding, Tips, auto scroll, internal anchors

 Blog

  • Upgrade your website with our Halloween Special!
  • Four Unique Ways to Use Forms to Connect With Your Customers
  • The Best Part? Our Customers
  • 3 Keys to Simple Search Engine Optimization
  • Doodlekit Receives International Recognition
more  

 Blog Comments

  • Vernon Chalmers: Doodlekit Receives International Recognition
  • j: The New Doodlekit Editor
  • Hailie Danielle Birt-Eash: The Blank Slate - Obstacle or Opportunity?
  • Pr Akoragye Faith: How to Use Social Media to Showcase Your Company’s Personality
  • Prateek Grewal: Auto Scroll Down Links (Internal Anchors)
more  

Support & Contact

  • Support Center
  • Website Issues & Bugs
  • Suggestions & Feedback
  • Business/Sales/Product Inquiries
  • Report Doodlekit Website Abuse
  • Non-Profit Website Support

Community

  • In The News
  • Testimonials
  • Customer Profiles
  • Non Profit Website Design
  • About Us
  • Blog

Legal

  • Legal Policy
  • Terms Of Use
  • Privacy

Resources

  • SEO Tips
  • Small Business Tips
  • Website Building Tips
  • Banners
  • Website Usage Scenarios

Copyright © 2006 - 2015.  Doodlebit, LLC. All Rights Reserved.

 powered by Doodlekit™ Free Website Builder