SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I stop jump to anchor links on page refresh

    New to Jquery and all. I need some help with the anchor links. .

    I've used the ScrollTo plugin for header images for each topic and I have created a menu to change the content in the div(s) that contain readable content with ajax, so it looks like different pages with headers using the one page.

    everything works well, but on browser refresh the page jumps down after the menu and on to the header.

    Would anyone know a script that would deactivate all anchor links in the page so that page onload the page loads as default index.html instead of index.html#some_anchor

    or any other ideas to stop it jumping.

    any help would be appreciated.

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can return false within your onclick functions which are going to the hash links...that way when you refresh it wont contain any hash links in the url.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is relatively easy to do in jQuery, but I'm not sure it's going to have the effect you want it to have... We could very quickly disable all anchor tags effect on the urls with the following code:

    PHP Code:
    $('a').click(function() {
        return 
    false;
    }) 
    It would be more advisable to assign a class to the specific anchor tags we want to disable. For example if we used the class "menu", the code would look like this:

    PHP Code:
    $('a.home').click(function() {
        return 
    false;
    }) 
    I'm not familiar with the ScrollTo plugin and it's possible that by disabling the modification of URL's it will stop working (thought this isn't likely if the plugin is decently written).

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    $('a.home').click(function() {

        return 
    false;

    }) 
    I tried this code and added the classed to the links, but it still jumps down on brower refresh.

    so I've been looking about and found this http://jelaniharris.com/2008/remove-...in-javascript/

    *Remove Anchors from a Url in Javascript, concept is good idea and might work for the browser refresh problem, and would look better in the url.

    only thing is I cant get the dawn thing to work --

    if you've got any work arounds to get this script to do what its supposed to do this would be very valuable information and make my day that little bit more jolly!

    any idea's?

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is difficult for me to tell you why it is not working in your case unless you can post an example of your code. Here is an example of this technique which works:

    PHP Code:
    <script type="text/javascript">
        $(
    document).ready(function() {
            $(
    'a.menu').click(function(){
                return 
    false;
            })
        })
    </script>

    <a href="#thisWontShowUp" class="menu">Test Anchor</a> 
    On a side note, anyone know why the syntax highlighting is breaking here after the script closing tag?

  6. #6
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the index.html#some_anchor still appear in the URL ?


    heres the code ..

    PHP Code:

       
    $(document).ready(function() {
           $(
    'a.button').click(function(){
               return 
    false;
           })
       }) 
    The Link.

    PHP Code:
     <li><div id="a1a"><a  href="#section1" class="button"><spanHome </span></a></div></li>
     <
    li><div id="a2a"><a href="#section1b" class="button"><spanRepairsUpgrades &ampInstallations </span></a></div></li>
     <
    li><div id="a3a"><a href="#section1c" class="scroll start button"><spanNetwork securityantivirus &ampconnectivity </span></a></div></li>
     <
    li><div id="a4a"><a  href="#section2" class="button"><spanWebsurfing for Minors </span></a></div></li>
     <
    li><div id="a5a"><a href="#section2b" class="button" ><spanData-solutions</span></a></div></li>
      <
    li><div id="a6a"><a  href="#section2c" class="button"><spanComputer Tutoring</span></a></div></li>
     <
    li><div id="a7a"><a  href="#section2c" class="button"><spanFind a Technician</span></a></div></li




    and the scrollTo section:

    PHP Code:

     
    <!--  // *** [     Header ScrollTo Jquery  plugin    ] *** // --> 
           
         


            
    <div class="section">
                <
    ul>
                    <
    li class="sub" id="section1">
                        
                        
                         <!--  
    Start of boxes horizontal slider -->
                                </
    p>
                                <
    div id="boxed-header" class="boxgrid caption"> <img src="images/header1.jpg" />
                                              
                                 
                                </
    div>
                        <!--  
    End of boxes horizontal slider -->
                        
                        
                        
                        
                    
                    </
    li>
                    <
    li class="sub" id="section1b" title="section 1-b">
                                            
                                                    <!--  
    Start of image -->
                                                    <
    img src="images/Header2.jpg" />
                                                    <!--  
    End of image -->
                    
                    
                                    
                    </
    li>
                    <
    li class="sub" id="section1c" title="Section 1-c">
                        
                                                     <!--  
    Start of image -->
                                                           <
    img src="images/Header3.jpg" />
                                                        <!--  
    End of image -->
                        
                        
                        
                        
                    </
    li>                
                </
    ul>

            </
    div>
            <
    div class="section">
                <
    ul>
                    <
    li class="sub" id="section2" title="section 2" >
                        
                                                     <!--  
    Start of image -->
                                                    <
    img src="images/Header4.jpg" />
                                                    <!--  
    End of image -->

                        
                    </
    li>
                    <
    li class="sub" id="section2b" title="Section 2-b">
                        
                                                    <!--  
    Start of image -->
                                                   <
    img src="images/Header5.jpg" />
                                                    <!--  
    End of image -->
                        
       
                    </
    li>

                    <
    li class="sub" id="section2c" title="section 2-c">
                    
                                                        <!--  
    Start of image -->
                                                   <
    img src="images/Header6" />
                                                    <!--  
    End of image -->
                        
                        
                    </
    li>
                </
    ul>

            </
    div


    Any ideas on how to remove the #some_anchor in url would be fabulous news to my ears, or in case eyes!

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm.. I think we're getting closer to figuring this out. Looking at the code you pasted, it looks like you might not be using the ScrollTo plugin exactly as intended.

    ScrollTo appears to expect you to bind events to each of the clickable elements, rather than using any kind of anchor tag to point the browser to the elements you wish to view. If ScrollTo is correctly powering your scrolling, you should be able to change the href attribute of all your anchor tags to "#" and have the scrolling still work. It shouldn't be dependent on any traditional document anchors.

    If you're implementing ScrollTo in your code could you show us your javascript? Looking at the ScrollTo demo on their site, it should resemble something like this.

    PHP Code:
        $('a.back').click(function(){
            $(
    this).parents('div.pane').scrollTo0800, { queue:true } );
            return 
    false;
        }); 
    If you don't have any code that looks like this I suggest you take a look at the ScrollTo documentation to read a better explanation of how to implement it than I can give you.

  8. #8
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem solved, I did infact implement the plugin incorrectly and changed the code to work by id's rather than anchors ..

    thanx for all your help, it was much so apprieated. cheers all!


Tags for this Thread

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
  •