CODEWITHSUNDEEP
htmlcss
BigJayMalcolm
BigJayMalcolm

Reputation: 47

Links to alter location within div

My page consists of 2 divs that are next to each other.

Say the div on the left is a book with different chapters.

I want my links in the right div to move the content within the div to have the clicked chapter at the top (Basically to scroll down to that chapter.

There is probably a simple answer for this i'm missing,

Any help would be great.

Upvotes: 1

Views: 42

Answers (3)

Vignesh
Vignesh

Reputation: 141

You need to use href and make it work.href and id of the chapter title should be same. So that it will navigate to the particular title.

<div> <!-- for links-->
<a href="#firstChapter">FirstChapter </a>
<a href="#secondChapter">Second Chapter </a>
<a href="#lastChapter">Last Chapter </a>
</div>
<div> <!-- for Chapters -->
<h1 id="firstChapter"> Chapter 1</h1>
<p>Content of chapter   </p>
<h1 id="secondChapter"> Chapter 2</h1>
<p>Content of chapter   </p>
<h1 id="lastChapter"> Chapter 10</h1>
<p>Content of chapter   </p>
</div>

Upvotes: 0

LightningBoltϟ
LightningBoltϟ

Reputation: 1373

Try this:

<div id="text">
    <h1 id="chapterone">Chapter one</h1>
    <p>The text of chapter 1</p>
    <h1 id="chaptertwo">Chapter two</h1>
    <p>The text of chapter 2</p>
    <h1 id="chapterthree">Chapter three</h1>
    <p>The text of chapter 3</p>
</div>
<div id="links">
    <a href="#chapterone">Chapter one</a>
    <a href="#chaptertwo">Chapter two</a>
    <a href="#chapterthree">Chapter three</a>
</div>

If you arw using iFrames take a look into jQuery ScrollTo

Upvotes: 1

asdf
asdf

Reputation: 3067

The simplest way to accomplish this would be using href. This will only work if you are building the "book" using HTML and it's not an image or PDF or whatnot.

Give the header of each chapter a unique id like "ch1", "c2", etc.

Then set the href links Chapter 1

<div id="left">
    <h1 id="ch1">
    <h2 id="ch2">
    #etc
 </div>
 <div id="right">
    <a href="#ch1">Chapter 1</a>
    <a href = "#ch2">Chapter 2</a>
    #etc
 </div>

Mind you this only works if the "book" is HTML. If it is iframed in or is an image then look into the jQuery plugin Scrollto which will allow you to set scroll heights (in pixels) for each element you want to scroll to.

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Upvotes: 0

Related Questions