Scroll down to exact div on the same page without refreshing after clicking a link

Question

I have a page with lots of contents, I want to put a hyperlink in the top, that scrolls the page to a div . this is my code :

        <a id = "show" class="show" href="#" onclick="return toggleOptions(this);"><h2>FIRST BUTTON</h2></a>
        <div id="toggleOptions" class="toggleOptions"> // this is div which is somewhere in center of page
        text text text....
        more text text.... 
        text text.........
        </div>

I know that I need to use JavaScript, something like that:

<script type='text/javascript'>
    window.location = "/index.php#myDiv";
</script>

Just don't know how to do It correctly. Please help me .

You can do this with jquery. See [this answer](http://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery) — Surjith S M, Jan 03 '14 at 09:46

score 1 · Answer 1 · edited Jan 03 '14 at 09:47

1

No need to javascript, simply do this :

   <a id = "show" class="show" href="#toggleOptions"><h2>FIRST BUTTON</h2></a>
    <div id="toggleOptions" class="toggleOptions"> 
    text text text..
    more text text.. 
    text text.......
    </div>

edited Jan 03 '14 at 09:47

user3145373 ツ

7,858
6
43
62

answered Jan 03 '14 at 09:43

Alireza Fallah

4,609
3
31
57

1

Thank you, that much easier that I though. – Jan 03 '14 at 09:46

score 1 · Answer 2 · answered Jan 03 '14 at 09:43

1

Try:

<a href="#idOfDiv">Go to my div</a>

<div id="idOfDiv">...</div>

answered Jan 03 '14 at 09:43

Streamside

332
1
8

What if I'd like to go 50px above that div? Is there a way to do that? – Emanuele Pesa Aug 24 '22 at 11:24

score 1 · Answer 3 · answered Jan 03 '14 at 09:47

1

<a id = "show" class="show" href="#toggleOptions"><h2>BUTTON</h2></a>
    <div id="toggleOptions" class="toggleOptions"> 
    text    
    </div>

answered Jan 03 '14 at 09:47

user3145373 ツ

7,858
6
43
62

score 1 · Answer 4 · answered Jan 03 '14 at 09:48

1

No need of having javascript for this. Just use the href of tag as follows:

    <a href="#toggleOptions">

Where #toogleOptions is the id of your target divs.

answered Jan 03 '14 at 09:48

Abu Isaac

75
2
13

I'd like to go 50px above that div! Is there any option to do that? – Emanuele Pesa Aug 24 '22 at 11:23

Scroll down to exact div on the same page without refreshing after clicking a link

4 Answers4