0

Im not sure if this is a duplicate question as I have searched for similar question but the answers was not really what I was looking for.

I have a page featuring previews for different sporting results.

Example

Round-1 has 7 fixtures and I will write 7 previews on those fixtures. Round-2 has 7 fixtures and I will write 7 previews on those fixtures. you get the point.

The Problem

Now my problem is the page is becoming quite long exceeding 20'000 words plus.

Instead of the user having to scroll to the bottom of the page for the latest round, I would like to add the rounds to the top of the page where the user can just click the desired round and it will automatically scroll to the div containing that specific round.

Im sure this can be easily done but I am a complete novice when it comes to Javascript.

if anyone can give me a bit of advice, or point me in the right direction it would be greatly appreciated.

Marilee
  • 1,598
  • 4
  • 22
  • 52

3 Answers3

1

You don't need javascript for this, in HTML you can link to the id of the fixture. Something like:

 <a href="#fixture1">link to fixture1</a>
 more content...
 <div id="fixture1">Something here</div>
fasouto
  • 4,386
  • 3
  • 30
  • 66
0

Please try searching the site first for answers that already exist

How to scroll to specific item using jQuery?

You can also just use html using anchors and the id attribute on your rounds.

<a href="#round1">go to round 1</a>
<div id="round1"></div>
Community
  • 1
  • 1
Roger
  • 2,912
  • 2
  • 31
  • 39
-1

You can do this using following code. List your headings of round at the top of the page using anchor tag. Like this

<a href="#round1">Round1</a>

Here round1 is Id of div for your actual round description. And then..

<div id="round1">actual round description</div>

This will achieve your requirement.

Ry-
  • 218,210
  • 55
  • 464
  • 476
Rahul Joshi
  • 193
  • 4