Javascript - Stop JS link from scrolling back to the top when clicked?

Question

I am using this JS to show/hide DIV's on the page to stop the page becoming too busy. The problem is that the header links are half way down the page, and so the user will most likely be scrolled somewhat down the page. Then clicking the links causes the browser to scroll back to the top again. Is there a way to stop this?

Just a bonus thing would be to have the div that is displayed so something like scroll nicely or fade in, but that isn't as important. Thanks!!

HTML LINK:

    <a href="#" onclick="toggle_visibility('content1');">Charity Partnership</a>
    <div id="content1" class="alist" style="display:none;">Content</div>

JS:

    function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if (e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }

replace (with `href="javascript:;"`) or remove the `href` tag. — putvande, Dec 16 '13 at 09:55
possible duplicate of [Use a blank link but not jump to top of page](http://stackoverflow.com/questions/20589549/use-a-blank-link-but-not-jump-to-top-of-page) — Quentin, Dec 16 '13 at 09:57
Thank you, that worked, but it is now not as obvious it is a link as the cursor shows a text highlighter rather than the hand. Is there a way to fix this? — MRC, Dec 16 '13 at 09:57
@Quentin Sorry I didn't know how to word it when I searched. I didn't come across that post. I thought it was a JS issue. Also that post didn't solve the issue as well as the answer TGO gave. — MRC, Dec 16 '13 at 09:58
Well, I would do the `href="javascript:;"` since that will give you the hand. Or you could add some CSS to include the cursor. — putvande, Dec 16 '13 at 09:58
@putvande Thank you, that solved the issue very well. You should have put that as an answer so I can mark as solved. — MRC, Dec 16 '13 at 10:02

score 2 · Answer 1 · answered Dec 16 '13 at 09:56

Make your javascript function return false:

function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if (e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
        return false;
    }

And use that value at the anchor element:

<a href="#" onclick="return toggle_visibility('content1');">Charity Partnership</a>
    <div id="content1" class="alist" style="display:none;">Content</div>

Thank you. I ended up using href="javascript:;" instead which has the same effect, but yours works too. — MRC, Dec 16 '13 at 10:09

score 0 · Accepted Answer · answered Dec 16 '13 at 10:04

You can either replace your href="#" with href="javascript:;" or remove the href tag.

With the last solution you will not see a hand cursor when you hover over the link.

I would go for the first solution or if you do want to go for the last solution you can add a { cursor: pointer; } to display than hand.

Javascript - Stop JS link from scrolling back to the top when clicked?

2 Answers2