On Page Anchors?

  • 2
  • Idea
  • Updated 8 years ago
On Page anchors allows a contents menu to be created for the page.
Here is an example of how this might work.
http://windyweather.yolasite.com/jade...

Just another idea to make site layout more flexible.
Thanks,
Windy
Photo of WIndy Gamer

WIndy Gamer

  • 10 Posts
  • 0 Reply Likes
  • enthusiastic

Posted 8 years ago

  • 2
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Windy,

If you would like to add links to your page that are Anchor links (such as Jump to Top), this will require a bit of HTML which will then allow your site visitor to jump to different areas of your page.

Please follow through these instructions. The first example will show you how to create a Jump to Top from the bottom of your page, and the second example will show you how to create a link which will take the user from the top of the page, to another specific area on the page.

Step 1: Creating the link

1. Drag and drop and HTML Widget onto your page where you would like the text to appear for your visitor to click on, for this example it will be the bottom of the page.
2. Enter this code in the HTML Widget:
<a href="#Top">Jump to Top</a>

What this bit of code is saying is: Top is the specific place on the page I want to jump, and Jump to Top is the text I want the link to display.

Step 2: Marking the Spot

1. Drag and drop and HTML Widget onto your page where you would like the link created in Step 1 to take the clicker, for this example it would be the top of the page.
2. Enter this code in the HTML Widget:
<a name="Top"></a>

What this bit of code is saying is: Here is the place named Top, and a link with this place specified needs to go here.

Keep in mind that Top and Jump to Top are arbitrary. You could create a link that would go to Center or to a specific topic on a page called News.

Let's do one more example. Say you want a user to be able to jump from the top of your page to a specific area halfway down the page which discusses News.

Step 1: Creating the link

1. Drag and drop and HTML Widget onto your page where you would like the text to appear for your visitor to click on, for this example it will be at the top of the page.
2. Enter this code in the HTML Widget:
<a href="#News">Read Current News Stories</a>

What this bit of code is saying is: News is the specific place on the page I want to jump, and Read Current News Stories is the text I want the link to display.

Step 2: Marking the Spot

1. Drag and drop an HTML Widget onto your page where you would like the link created in Step 1 to take the clicker, for this example it would be wherever the News section of the document is.
2. Enter this code in the HTML Widget:
<a name="News"></a>

What this bit of code is saying is: Here is the place named News, and a link with this place specified needs to go here.

Give these a try and you will see that you can easily have your visitors jump all over your page!

Cheers!
Brianna
Photo of WIndy Gamer

WIndy Gamer

  • 10 Posts
  • 0 Reply Likes
Oh of course.... Sorry.. I know enough HTML to add the page anchors myself. Used to do that back in 1996 when I made my first site with Dreamweaver 2. ;)

Let me give that a try for my page.
Photo of WIndy Gamer

WIndy Gamer

  • 10 Posts
  • 0 Reply Likes
Woops...

So you can't put in a link like "#Races" 'cause you get a link to:
http://"/#Races%22

which obviously doesn't work. Sure would be nice if you could enter the anchor names in the Link menu. A table of contents is a pain to write since you have just dropped back to writing a bunch of HTML in an environment you can't see and don't have control over. If you see what I mean.

This anchor problem really calls for a widget called Page Anchor and a link feature called Page Anchor Name. Which is, btw, the way Dreamweaver implemented it in 1996, as I recall. ;)

As a consultant trying to leave a Yola site in the hands of a client who is not an HTML expert, the concept of having intra-page table of contents is going to be way beyond them without the Anchor Widget and Anchor Link type.

I guess this becomes an Idea.

Thanks,
Windy
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I am sure you know this, but to let you know you can add more than one of the links in an html widget. Like you can add

<a href="#top">Go to top</a>
<a href="#news">Go to News</a>
<a href="#races">Go to Races</a>

I'm sure you know this, it just sounded like you where adding each link in it's own HTML widget.

Sincerely,
Nathan
Photo of WIndy Gamer

WIndy Gamer

  • 10 Posts
  • 0 Reply Likes
:) Yes. Thanks. I'm ROFL thinking about my clients that can write an email trying to do this.
Happy Holidays.

More like this tho if you want it to match the pages: ;)

Contents





hehehehe

windy
Photo of WIndy Gamer

WIndy Gamer

  • 10 Posts
  • 0 Reply Likes
ha ha ha... it took the HTML and did it.. how funny...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Nathan for your help on this.

@ Windy - please let me know if you still have trouble with this or if everything is sorted out now?
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Your welcome Sanja :)
Photo of WIndy Gamer

WIndy Gamer

  • 10 Posts
  • 0 Reply Likes
All set thanks.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi WIndy, I am glad to hear that everything is fixed now!