locked
<a href=#>X</a>?<a href=##>X</a>?<a href=###>X</a>?<a href=javascript:;>X</a>?<a href=javascript:void>X</a>? which one is good? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User2057738320 posted

    a page if have scroll, a link have function, like below

    <a href="#" onclick="alert('hello')">X</a>

    if you click X, the pag will alert and the page will scroll to top. 

    if href keep blank, it will open new page.

    <a href="" onclick="alert('hellow')">X</a>

    so,  want page keep position state, one method is return false.

    <a href="#" onclick="alert('hellow'); return false">X</a>

    if not use return false, use void(0) instead

    <a href="javascript:void(0)" onclick="alert('hellow');">X</a>

     someone also  write :; like below.

    <a href="javascript:;" onclick="alert('hellow');">X</a>

    use ### can also have the keep position

    <a href="###" onclick="alert('hellow');">X</a>

    in fact, I often use 

    <a href="###" onclick="alert('hellow');">X</a> and  <a href="#" onclick="alert('hellow'); return false">X</a>

    a little difference is if add target=_blank ( <a target=_blank href="###" onclick="alert('hellow');">X</a>)  the page will open new,

    but,  <a href="#" target=_blank onclick="alert('hellow'); return false">X</a> not.

    now, my question is :

    why  <a href="##"  onclick=alert("hello">X</a> DO NOT keep position state.

    <a href="#" onclick=alert("hello")>X</a>

<a href="##"  onclick=alert("hello">X</a>

<a href="###"  onclick=alert("hello">X</a>

    Monday, September 26, 2016 1:09 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User36583972 posted

    Hi mqingqign123,  

    The role of the anchor is to jump to the designated place, the anchor can be used in with the name. We usually do not use the anchor like ##, if you want to keep the position, you can set Onclick event return false;

    Reference Code :

    <body>
    <form id="form1" runat="server">
        <div>
            <img src="http://img.zcool.cn/community/0332c51554c794100000158fc44db5f.jpg" />
            <a name="Box" href="#" onclick="alert('hello')">X1</a>
            <img src="http://img.zcool.cn/community/0332c51554c794100000158fc44db5f.jpg" />
            <a id="Boxes" href="#" onclick="alert('hello')">X2</a>
            <img src="http://img.zcool.cn/community/0332c51554c794100000158fc44db5f.jpg" />
            <a href="#Box" onclick="alert('hello')">X3</a>
            <img src="http://img.zcool.cn/community/0332c51554c794100000158fc44db5f.jpg" />
            <a href="#Boxes" onclick="alert('hello');return false;">X4</a>
        </div>
    </form>
</body>

    Best Regards,
     
    Yohann Lu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 27, 2016 3:30 AM