How can I use a link to scroll down page?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I want a contents page at the side to navigate me to sections on the page.
Photo of cathy

cathy

  • 1 Post
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Cathy,

This is most easily effected by the use of "anchors" described in the tutorial: Tutorial: Creating HTML Anchor Links.

It's good to be aware that your "contents" list may scroll out of view depending on the length of your page. If this is, or maybe the case, it is worthwhile considering a scrolling contents list that will also move up and down relative to the sections viewed.

Happy to give you a specific solution for this if you wish.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hello Gop - and anyone else who's reading this :)

The link you've mentioned in the post above is really helpful, however i have a couple more specific questions:

1. Is there a way to just have the text come up as a link when you hover over it? So no default link?
2. Can you make the page scroll visible? (instead of jumping actually see the page scroll down?)

For an example of what i'm trying to achieve, please see this link:

http://www.asos.com/au/women/a-to-z-of-brands/cat/pgehtml.aspx?cid=1340&via=top&r=2

Thanks for your time and knowledge!!

Cheers,
Saskia
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Saskia,

I don't understand Q1? (Apologies for that. Can you elaborate?) Happy to review of course.

Q2: Scrolling HTML Bookmarks. Dynamic Drive. This has worked very well for me and not a difficult implementation.

You can also combine this with a floating Index that will remain visible at any part of your page so that you don't need to return to the index (often/typically) at the top of the page, for another listing index. Happy to elaborate if of interest.
(Edited)
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hi Gop,

Thanks for replying and for the link with info regarding my second question, awesome! Will try it in a moment, but first...

My first question wasn't very clear at all, so its me that is should apologize not you ;) The text is actually doing what i want it to do when using the tutorial above. I just like to change the colours that's all.

What i'd like to do is have the text appear in black (instead of the blue you get when using the code) and then when you hover over it change it to grey or red and make it bold and underline.

I have tried it with css code but it doesn't respond at all so i must do something wrong, even though i have played with margins in the code as well and this does work ..

I've made a div id (#index) and then refered to it as follows:

#index {margin-right: 10px;}
#index {colour: #000000;}
#index:hover {colour: #d40000;}

As mentioned, it does pick up the margin-right, making the spacing between the letters bigger (i'm using a a-z index) but it doesn't respond to the colour at all... perhaps im using a wrong reference? Im no css pro thats for sure..

Curious to hear your thoughts!

Thanks,
Saskia

PS: Would love to know about a floating  index but don't need it for this project. Still... would be good to know for future reference!
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hmm... i had a look at the link about scrolling html bookmarks. I thought i could just use the code provided, thinking a regular anchor was already in place (see above tutorial).

I added the given code into the html widget where i already had the other coding from the tutorial and i copied and pasted the js. code in sublime text and saved as js file. Then i uploaded this file to my file manager.

This isn't working and i am sure i am just being silly trying it this way. I must miss a few steps (for instance, where do i refer to the .js file?) but i simply don't understand how else to read the instructions and implement it in Yola. Hope you can help me with some simpler explanation?

Thanks again for your help!

Saskia
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Saskia,

I suspect that it may be an incomplete path to the stored js file (?):

<script type="text/javascript" src="bookmarkscroll.js">

You would need to add the path "resources" such:

<script type="text/javascript" src="resources/bookmarkscroll.js">
(Edited)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
With regard to your first query...vers 2 :). You may be better using the style editor for this as it sounds as if this has priority over HTML for the links decoration as such?

The style editor is designed with consistency in mind so that ad hoc variations can cause a problem
(Edited)
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
The .js file is referred to in the few lines of code that you copy from DynamiC Drive. Easiest is to place it in an HTML widget somewhere on your page, probably best before the content as this will allow pre-loading before it comes to the content. (Probably not an issue though as it's a very small script and code).
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Thanks Gop!

Can't have a look at it now but will tomorrow and let you know how i go :)

Have a great day!
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Tried to put the amended code with the resources reference in a separate HTML widget (as i had it first with my other coding). This still didn't work though. I mean the jumping to half way down the page does, just not that you can see the page scroll down, it just jumps..

The code i used - from the site you mentioned - is this:

 <!--

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>;

<script type="text/javascript" src="bookmarkscroll.js">

/***********************************************
* Scrolling HTML bookmarks- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>
-->

And then i uploaded the js file to my file manager.. Any idea what else i could have done wrong?


Regarding the style, yes off course i see now i can just use the style designer for that. Duh!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Still not clear to me if you adjusted the pathway: It should now look like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>;
<script type="text/javascript" src="resources/bookmarkscroll.js">
/***********************************************
* Scrolling HTML bookmarks- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>

You would also need to add a sub-directory if you have added the .js to a folder within the File Manager
(Edited)
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Sorry to be so unclear, not sure why my code didn't include the resources reference as im positive that i did have that in my code.. Anyway, even though its there, im sure im missing something else because the visible scroll down effect isn't working. Also, the js file is not in a subfolder so that isn't it.

Perhaps its easier if i just have a quick live chat with one of the Yola support crew as they can actually get into my account and see directly what im doing wrong, thanks for your help though!