Inserting html code for "Jump to top" or "Jump to topic" in the appropriate place on a page

  • 1
  • Question
  • Updated 7 years ago
Hi
I got some help from Yola on how to insert some html code into my pages so that I could have a "Jump to top" link. That advice worked when I inserted a "Jump to top" link at the very bottom of the page. But whenever I try to insert a "Jump to top" somewhere else (say, a quarter or half-way down a page), I insert what I think is the correct html code as explained to me by Yola, but when I click save, the "Jump to top" appears either at the very top or very bottom of the page.
Similarly, if I try to insert a "Jump to...." link into items in a list of topics at the top of a page, so that a user can click and have the page jump to the appropriate place where the desired item on the list, I can't get the code to stay where I want it on the page; it appears at the very top of the page.
I really don't know about html code, other than what Yola help told me (based on a tutorial on "Jump to top" code), and I'm stuck at this point. I'm sure I'm making some simple mistake.
Help, please..... thanks.
Heather www.AughrusPeninsula.com
Photo of Heather Greer

Heather Greer

  • 9 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Heather Greer

Heather Greer

  • 9 Posts
  • 0 Reply Likes
Hi
I got some help from Yola on how to insert some html code into my pages so that I could have a "Jump to top" link. That advice worked when I inserted a "Jump to top" link at the very bottom of the page. But whenever I try to insert a "Jump to top" somewhere else (say, a quarter or half-way down a page), I insert what I think is the correct html code as explained to me by Yola, but when I click save, the "Jump to top" appears either at the very top or very bottom of the page.
Similarly, if I try to insert a "Jump to...." link into items in a list of topics at the top of a page, so that a user can click and have the page jump to the appropriate place where the desired item on the list, I can't get the code to stay where I want it on the page; it appears at the very top of the page.
I really don't know about html code, other than what Yola help told me (based on a tutorial on "Jump to top" code), and I'm stuck at this point. I'm sure I'm making some simple mistake.
Help, please..... thanks.
Heather

This reply was created from a merged topic originally titled
Getting "Jump to top" html codes to stay where I want it on a page.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Heather

Thank you for your detailed post!

I have checked your website in the Sitebuilder and found anchor link errors (jump to ... links) on your page "The Augrhus loop". I have corrected them, and now it jumps to the top correctly (that's the furthest point up that you can let it jump).

If you're not familiar with HTML code, then it can be a little challenging in the beginning to add the code to the correct spots. It is easy if you have block elements such as text paragraphs and pictures where you can add the anchor mark-ups in between using HTML Widgets. It will be more complicated with lists because then you will either need to interrupt the list and add an HTM Widget in between, or, what would be the better solution, add the code into the list by editing the HTML source code of the Text Widget.

If you give me one example for the first problem and one for the "list of topics" problem, I will be able to add the code for you, and you can look at it and learn how HTML works. Then you will be able to copy this for your other spots of your website where you want it.

Please let me know on which pages these problems are, so that I quickly know where to go. And describe to me exactly where you want the link and where on the page it should jump to. Deal?
Photo of Heather Greer

Heather Greer

  • 9 Posts
  • 0 Reply Likes
Hello Stefan, and thank you very much for your reply. I'l come back to you tomorrow, if I may, with a response along the lines you suggest. I really appreciate your help.

Thank you again and until tomorrow

Heather
Photo of Heather Greer

Heather Greer

  • 9 Posts
  • 0 Reply Likes
Hello again Stefan and once again, many thanks for your very helpful response 4 days ago, and apologies for the delay in getting back to you (some unexpected interruptions). You kindly invited me to provide you with two examples, and said that you would then add the code for me, so that I can look at it and learn how the html works - which would be very useful indeed.
So here are two examples:

- For "Jump to top": On the page called "bed and breakfasts" in Page Manager, I would like to insert a "Jump to top" at the end of the Bed and Breakfast section (which in time will get much longer as I add more B&Bs) - that is, just above the large heading "HOTELS" about two thirds of the way down the page.

- For the "list of topics" example: On the page "Bars-Eating Out-Entertainment", at the top is a list of two topics:
(1). Refreshments and eating out
(2). Regular/weekly entertainment
(there will shortly be a third item on this list, "regular sports activities", but if I can learn to handle the two that are there, I should be able to replicate the html).
I would like the user to be able to click on a link "jump to regular/weekly entertainment" beside this list item, and be brought down to that heading on the page. And, although it represents only a jump of a paragraph or two, I suppose for the sake of symmetry, I would also like to have a similar link beside the first list item "Refreshments and eating out"; and in due course, when it's added, I'll want to have a "jump to regular sports activities" beside that third list item, yet to be added.

I'd certainly appreciate it very much indeed if you would add the appropriate html code, such that I can look at it and learn how to do it.

In a related way, I'd love to be able to drag and drop (say) a Gallery widget to a specific part of a page, and have it stay there. On the page "Omey Island", I wanted to add the 5-pic gallery that's currently at the top of this page, and have it beneath the second para, which ends "Help to protect and preserve this special place.", but every time I tried (and I tried lots of times), the gallery placed itself at the very top of the page - which is why it's rather srangely placed there currently. I imagine this problem is related to the ones we've referred to above.

You mentioned that it's easy to place code where I want it if I have something like a text paragraph; but for me that doesn't seem to make any difference - the code or widget still places itself at the very top of the page. I suspect that I have to be able tto insert code which will be like a 'place marker'? If I can learn how to handle this, it will be great!

Thanks again

Heather (www.AughrusPeninsula.com) - greerh@nrl.ie
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Heather

I played around in your Sitebuilder and made the two example changes that you provided above. I hope you will like it!

The reason why you are having difficulty placing HTML or Picture Gallery Widgets between your text paragraphs is simple: You have added the text of a whole page into just one Text Widget. You can only place a widget above another widget, below another widget, or between two widgets. This is why you weren't able to move your Picture Gallery between two text paragraphs.

Example: Let's say you have two text paragraphs and you would like to put a Picture Gallery in between. It won't work if you put both text paragraphs into one Text Widget because you can't place anything between those paragraphs while they are in one widget. But if you add your two parargraphs in two separate widgets, you can easily place another widget in between of these two Text Widgets. So you add the first paragraph to one Text Widget. Then you drag and drop another Text Widget onto your page, add the second paragraph into this second widget. Once done, you will be able to drag and drop e.g. a Picture Gallery Widget in between those two Text Widgets. I recommend to use more than one Text Widget on all your pages to stay flexible in terms of the layout.

The same principle applies for adding Jump to the top or Jump to a specific page spot links. If you would like to add a bookmark for a specific page spot, e.g. above a certain paragraph, you must make sure that this paragraph starts in a new Text Widget. Then you will be able to place an HTML Widget right above that Text Widget and add your bookmark code there.

For lists there is a little problem: You cannot currently add anchor links to the source code of Text Widgets, only to HTML Widgets. A solution for this is a bit more complicated, and you will need to do a little bit of work, but it's doable. So if you have a list whose items you want to link to specific spots of your page, you can do the following:
  1. First use an HTML Widget to add the bookmark code to the desired spot of your website, e.g.:
    <a name="second-list-element" id="second-list-element"></a>

  2. Create a Text Widget just for the list. You can add the text above and below the list to separate Text Widgets that you place above and below the Text Widget with the list. For the list you can use the listing feature in your Text Editing Toolbar that opens when you click into the Text Widget.

  3. Once you have finished your list, save, and click again into the Text Widget that contains your list.

  4. On the Text Editing Toolbar, click on the HTM icon on the very right-hand side.

  5. The HTML editor of your Text Widget opens. Select all and copy. Make sure you copy the entire code shown.

  6. Drag and drop an HTML Widget to the extact desired spot. Paste the code into the HTML editor.

  7. You will have something like this:
    <ol><li>first list element</li>
    
    <li>second list element</li>
    <li>third list element</li>
    </ol>

    Now add the anchor link like this:
    <ol><li>first list element</li>
    
    <li><a href="#second-list-element">second list element</a></li>
    <li>third list element</li>
    </ol>


  8. Click on Save and check in preview.

Now the link in the list should take you to the desired spot on your page.

I know this is a lot to learn, but I hope it will make sense to you, Heather. Don't miss to check out the way I added the code to your two pages. Please let me know if you need any further assistance.
Photo of Heather Greer

Heather Greer

  • 9 Posts
  • 0 Reply Likes
Hi Stefan

Thank you so much for your help! I really apprciate it. Of course I've tried out the changes you've made, and they're perfect.
I'll need to wait a a little while till I have some time to really study - and replicate - the code changes you've shown me. But I believe I "get" it and will be able to go on from here.

If you don't mind, can we leave this thread open just in case I have a query on what you've written. Over the coming 1-2 days I should have an opportunity to look at it with a bit of time, and to try it out for myself, and I'll come back to you to tell you that "I have it" right....

Yes, I figured out - a bit late - that I ought to be using separate text boxes for different paragraphs, to give the flexibility to add widgets. I'll gradually cut and paste existing content into separate text widgets, in order to give myself that flexibility for when I need it.

Thanks very much again for your help. It's great and I'm grateful....

Heather
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Heather

It's my pleasure. Sure we can leave the thread open. We hardly close any threads unless they're really old and out of date.

I hope you will enjoy to learn a little coding when you have the time!
Photo of Heather Greer

Heather Greer

  • 9 Posts
  • 0 Reply Likes
Great!
Yes; I'm going to have a look on Amazon right now and see if I can find the Slim Volume on html for Beginners.

Thanks again. I've started to cut and paste my pages into separate text widgets, and in future I'm going to use separate text widgets for each para of text.

Looking forward to trying out the list "jump to" code/help you gave me; that will be really useful.

Thanks again, Stefan