link/href that will not scroll to the top of the page

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Jezternz
    New Member
    • Jan 2008
    • 145

    link/href that will not scroll to the top of the page

    Okay, simple problem, probrabable simple answer.
    I have <a href="#" onclick="javasc ript">Click Me</a>
    So basicly I want an anchor to do some javascript wen its clicked, my problem is, whenever this link is pressed, because of the hash(#) the page is scrolled to the top. How can I make a link do nothing in html (ie leave the page position where it is) without it scrolling to the top of the page.

    Thanks. Josh
  • drhowarddrfine
    Recognized Expert Expert
    • Sep 2006
    • 7434

    #2
    Just leave the href off, or remove the hash.

    Comment

    • Jezternz
      New Member
      • Jan 2008
      • 145

      #3
      wow that simpl, I probrably shud have tried that lol, thanks. I think i have to leave the href on or I get validation errors.

      Edit yeh neitehr of those work for me as
      href="" sends the user back to domain.com when the actual page is domain.com/?p=news
      and the removal of the href is not xhtml complient

      Comment

      • Markus
        Recognized Expert Expert
        • Jun 2007
        • 6092

        #4
        Originally posted by Jezternz
        wow that simpl, I probrably shud have tried that lol, thanks. I think i have to leave the href on or I get validation errors.

        Edit yeh neitehr of those work for me as
        href="" sends the user back to domain.com when the actual page is domain.com/?p=news
        and the removal of the href is not xhtml complient
        Why not use like <span onclick=..> ? Or is that not valid?

        Comment

        • Death Slaught
          Top Contributor
          • Aug 2007
          • 1137

          #5
          Or you could just do this:

          [HTML]<a name="placeHold er">&nbsp;</a>

          <br />

          <a href="http://domain.com#plac eHolder" onclick="insert JavaScript here">Text to click.</a>[/HTML]


          Thanks, Death

          Comment

          • gits
            Recognized Expert Moderator Expert
            • May 2007
            • 5390

            #6
            here is one more possibility:

            Code:
            <a href="javascript:return false;" onclick="alert('test');">Click Me</a>
            or setting this during the execution:
            Code:
            <a href="#" onclick="alert('test'); this.href='javascript:return false;';">Click Me</a>
            it just replaces the hash with a javascript action that just returns false :) whatever this will be good for ... but it avoids to search for an anchor to jump to ...

            kind regards
            Last edited by gits; Feb 16 '12, 09:02 AM.

            Comment

            • drhowarddrfine
              Recognized Expert Expert
              • Sep 2006
              • 7434

              #7
              Originally posted by Jezternz
              the removal of the href is not xhtml complient
              It is not invalid.
              Authors may also create an A element that specifies no anchors, i.e., that doesn't specify href, name, or id.
              .

              Comment

              • gits
                Recognized Expert Moderator Expert
                • May 2007
                • 5390

                #8
                Originally posted by drhowarddrfine
                It is not invalid. .
                then this should be the preferred solution, since it reduces the overhead of all the other suggestions :) ?

                kind regards

                Comment

                • Jezternz
                  New Member
                  • Jan 2008
                  • 145

                  #9
                  I think I will go with this one.
                  Originally posted by gits
                  here is one more possibility:
                  [HTML]<a href="javascrip t:return false;" onclick="alert( 'test');">Click Me</a>[/HTML]
                  Thanks heaps guys, much apreciated.

                  Edit: Although this works properly I do get a javascript error message (if i click on the little error box thingo down the bottom of ie that says "return statement outside of function".. Any other ideas? :(

                  Comment

                  • harshmaul
                    Recognized Expert Contributor
                    • Jul 2007
                    • 490

                    #10
                    Originally posted by Jezternz
                    I think I will go with this one.


                    Thanks heaps guys, much apreciated.

                    Edit: Although this works properly I do get a javascript error message (if i click on the little error box thingo down the bottom of ie that says "return statement outside of function".. Any other ideas? :(
                    Code:
                    <a href="javascript:void" onClick="do some javascript magic">clcik here</a>

                    Comment

                    • Jezternz
                      New Member
                      • Jan 2008
                      • 145

                      #11
                      Originally posted by harshmaul
                      Code:
                      <a href="javascript:void" onClick="do some javascript magic">clcik here</a>
                      again thanks but still error, it shows "syntax error" :(
                      You would think there would be a simple answer for this, but none that work correctly so far.

                      Edit: This doesnt give errors for some reason even using return
                      Code:
                      <a href="#" onclick="retun dothis()">link</a>
                      where I just added "return false;" on the end of the function dothis

                      I apologize for any time I have wasted, thanks heaps guys.

                      Comment

                      • Chiva
                        New Member
                        • Feb 2012
                        • 1

                        #12
                        Hey, don't know if still need it but here you have for future references:

                        Code:
                        <a href="javascript: void(0)">

                        Comment

                        Working...