Remove anchor link after scrolling - works also on links from another page

Question

I've set up a single page website with smooth scrolling that strips the anchor link from the URL after smooth scrolling. Here's the jQuery I'm using :

$(function() {
    $('a.page-scroll').on('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top  - 60
        }, 1000, 'easeInOutExpo');
        event.preventDefault();
    });
});

Everything works great until I added other pages. I can't get the anchor link to strip out after a link like <a class="page-scroll" href="../#contact">Contact</a> on another external page.

I've searched high and low on SO but can't find a solution that works.

I don't totally care about the smooth scrolling if the link is from an external page. What I need most is to navigate / scroll to the id section of the main page (with offset to accommodate fixed navigation) and remove the anchor link from the browser URL window when the link is from an external page (from other pages on my website, or from other websites).

I've tried this also, but it likewise only works on internal links on to an id on the same page :

<script>
$(function() {
  $('a[href*=#]:not([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) {
        $('html,body').animate({
          scrollTop: target.offset().top - 60
        }, 1000);
        return false;
      }
    }
  });
});
</script>

I've also tried this with no luck :

    <script type="text/javascript">
(function($) {
    $(document).ready(function() {
    var url=document.URL.split("#");
    var ancher=url[1];
         $('html, body').animate({
           'scrollTop':   $('#'+ancher).offset().top - 60
         }, 5000);
    });
})(jQuery);
  </script>

Any New Year's Eve help would be most appreciated so I can get this project wrapped up!

Answer 1

It's possible I don't understand the extent of the question, but I believe you are trying to make it so the href doesn't fire on pages that are wanting to scroll but does on pages that are linking to other pages and not sections within the page itself. Perhaps something like this would work for you:

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        if ($anchor[0].href[0] === '#') {
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top  - 60
            }, 1000, 'easeInOutExpo');
            event.preventDefault();
            return false;
        } else {
            return true;
        }
    });
});

What this does is look to see that the leading character in the href is a # implying that its a link to a section within itself.

Let me know if that helps and/or if I'm on the right track.

ps: I left the .bind in there because I don't know what version of jQuery you are on, but the newer syntax is to use .on

Happy New Year

Just to append slightly in regards to making it so that deep links to the main page go to the appropriate section but don't have the hash tag:

You can remove that 'hash' variable from window.location, but if you attempt to remove the hashtag entirely, it will cause the browser to refresh. This will also cause the viewer to lose the spot (thus removing the deep link's purpose).

To change the hash tag value (keeps the #):

window.location.hash = ''; // clears the hash tag

To remove the hash tag and its value (clears the # and everything past it):

window.location.href = window.location.href.substr(0, window.location.href.indexOf('#')); // this causes a browser refresh

And if it's not wholly apparent, you would run it on page load

$(document).ready(function() {
    if (typeof(window.location.hash) !== 'undefined' && window.location.hash.length > 0) {
        window.location.hash = ''; // will clear the hash anytime someone arrives with a hash tag
    }
});

Answer 2

For a page with smooth scrolling try to use replaceState() .
It will remove the hashtag at anchor link from the browser URL window (without page reloading).

// smooth scrolling
function scrollTo(selectors)
{
    if(!$(selectors).length) return;
    var selector_top = $(selectors).offset().top - 0;
    $('html,body').animate({ scrollTop: selector_top }, 'slow');
}    

// do scroll and clear the hash tag    
$(window).on('load', function(){          
    if( typeof(location.hash) !== 'undefined' && location.hash.length ) {
       scrollTo(location.hash);
       history.replaceState(null, null, location.pathname);                      
    }       
});