SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast steveorg's Avatar
    Join Date
    Oct 2006
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Switching divs jumps to page top

    I'm using a script (originally posted by Snarky in another thread) to expand/collapse a section of a page so that the content of one of two divs are visible.
    Code:
    function showA(){
    document.getElementById("DivBId").style.display = "none";
    document.getElementById("DivAId").style.display = "block";
    }
    
    function showB(){
    document.getElementById("DivAId").style.display = "none";
    document.getElementById("DivBId").style.display = "block";
    }
    The divs are in the middle of the page. The problem is that when the function executes, the page jumps to the top and the user has to scroll back to the div position. Does anyone have any suggestions to prevent the jumping to the top of the page? Thanks.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im gonna guess that you are calling the function from the onclick of an <a> tag, and are not returning false to prevent the default behavior of the <a>.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser
    Im gonna guess that you are calling the function from the onclick of an <a> tag, and are not returning false to prevent the default behavior of the <a>.
    ...so the code should be something like this:
    Code:
    <a href="#" onclick="showA(); return false;">Tab One</a>
    <a href="#" onclick="showB(); return false;">Tab Two</a>
    Of course it won't work with JS disabled, graceful degradation, blah blah blah...

  4. #4
    SitePoint Enthusiast steveorg's Avatar
    Join Date
    Oct 2006
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jimfraser - Your guess was right on the money.

    Buddy Bradley - Thanks for the code.

    I wasted several hours trying to figure this one out. Thanks for your help!

    Steve

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Provided you don't need it to work in Netscape 4 you can replace the <a> with a <span> and then you wont need the href= or the return false.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •