SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll to anchor on page refresh

    Hi all,

    Adapting this code may not be the best method, see what you think.

    I have a page where certain actions cause the page to reload and then jumps to an anchor (e.g. #title gets appended to the url) which is disorientating, I think it will soften the blow if the page scrolls to the anchor.

    This is code I use to scroll to anchors with links on a page

    Code:
    $(document).ready(function(){
    	
    	  $('a[href*=#]').click(function() {
    		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    		&& location.hostname == this.hostname) {
    		  var $target = $(this.hash);
    		  $target = $target.length && $target
    		  || $('[name=' + this.hash.slice(1) +']');
    		  if ($target.length) {
    			var targetOffset = $target.offset().top;
    			$('html,body')
    			.animate({scrollTop: targetOffset}, 1000);
    		   return false;
    		  }
    		}
    		});	     
    	});
    I see that this is a click function. Can this just be amended so that it checks the url and scrolls accordingly?

    In an ideal world (not sure if this is possible) the page would reload in the same position it was in before the reload. Then remove the need for the scroll.

    Any input will be welcomed : )

    Mike

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could just rip the guts out of that method and have it outside the click handler.

    Though I don't see why this would be occurring. When linking to an anchor the page should automagically scroll to it without intervention.

    Do you perhaps have a test page up somewhere that shows the problem?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry for the late reply.

    I tried taking the code outside the click handler, but it didn't seem to work (I'm not too great with .js so I may have mistyped). When the page reloads, it does jump to the correct anchor but it doesn't scroll.

    I can't display a test page on here but I can PM you the link if this still is enough information.

    Many thanks

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I managed to find a solution to this with a plugin called Softscroll : )


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
  •