WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Anchor links with smooth scroll from page to page (6 posts)

  1. mattajames
    Member
    Posted 1 year ago #

    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>
  2. wpismypuppet
    Member
    Posted 1 year ago #

    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.

  3. mattajames
    Member
    Posted 1 year ago #

    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

  4. wpismypuppet
    Member
    Posted 1 year ago #

    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?

  5. mattajames
    Member
    Posted 1 year ago #

    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

  6. popgirl23
    Member
    Posted 8 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic