Support » Fixing WordPress » Anchor links with smooth scroll from page to page

  • Resolved mattajames

    (@mattajames)


    Hi I am currently developing a site:
    http://www.optimise-website-marketing.com/

    Problem is that the anchors will not use the smoth scrolling from one page to another. It work onlt when you are on the the same oage as the anchor.

    Please help, im using the following script:

    [ Code edited with backticks. Moderator note: when sharing code examples, please wrap the code in backticks or use the code button. ]

    <script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
      function filterPath(string) {
      return string
        .replace(/^//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(//$/,'');
      }
      var locationPath = filterPath(location.pathname);
      var scrollElem = scrollableElement('html', 'body');
    
      $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target) {
            var targetOffset = $target.offset().top;
            $(this).click(function(event) {
              event.preventDefault();
              $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                location.hash = target;
              });
            });
          }
        }
      });
    
    // ]]></script>
Viewing 5 replies - 1 through 5 (of 5 total)
  • wpismypuppet

    (@wordpressismypuppet)

    That’s because your code is set to look at every anchor tag on the page and add a click event to scroll to a location inside the page itself. You have no code that looks at window.location.hash when the page loads!

    You’ll want to add something to the effect of:

    if(window.location.hash) {
    	// scroll to the target you want using similar code to your animate targetOffset
    }

    Inside your $(document).ready() function, but outside your $('a[href*=#]').each() function. Let me know if you need more details. We’ve done this quite a bit on some of our client’s websites.

    Thanks for your reply, Im afraid im not the best at javascript, Ive tried to put the above code in but to no effect. Can you explain more please

    wpismypuppet

    (@wordpressismypuppet)

    Something like this… though it’s not tested because I don’t know how you are handling your current hash methods. So it’s more a guess… but hopefully put you in the right direction.

    <script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
    	function filterPath(string) {
    		return string
    		.replace(/^//,'')
    		.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    		.replace(//$/,'');
    	}
    	var locationPath = filterPath(location.pathname);
    	var scrollElem = scrollableElement('html', 'body');
    
    	$('a[href*=#]').each(function() {
    		var thisPath = filterPath(this.pathname) || locationPath;
    		if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) {
    			var $target = $(this.hash), target = this.hash;
    			if (target) {
    				var targetOffset = $target.offset().top;
    				$(this).click(function(event) {
    					event.preventDefault();
    					$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
    						location.hash = target;
    					});
    				});
    			}
    		}
    	});
    
    	// Check the current URL on page load to see if a hash was passed
    	if ( window.location.hash ) {
    		var targetOffset = $('a[href*=' + window.location.hash + ']').offset().top;
    		$(scrollElem).animate({scrollTop: targetOffset}, 400);
    	}
    }
    // ]]></script>

    By the way, if you aren’t the best at JavaScript, how did you get your code? If it were pulled off a website, can we see that link to better assist?

    Thanks I have applied the code but unfortunatly its not the solution:

    I found the script here: http://five3.me/forums/topic/smooth-scrolling-between-anchors/

    Many thanks for your help
    Matt

    I know this is resolved, but I want to add this worked for me! I tired using various plugins but they didnt work when jumping from a different page. THIS method works great, and all I need to do now is customize the scroll effect/animation more to my liking. Thanks for posting this.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Anchor links with smooth scroll from page to page’ is closed to new replies.