How do I implement a one page navigation with anchors?
This is the code I'm using on most of my projects

(function ($, Drupal) {
  var wt = window.wt || {}; //just my personal namespace

  wt.getFixedTop = function() { 
    /* return pixel height of fixed elements, e.g. Admin Toolbar or a fixed main nav */
  };

  wt.scrollTo = function(uri) {
    if ((uri.indexOf(location.pathname) === 0 || uri.indexOf('#scroll') === 0) &amp;&amp; uri.indexOf('#scroll') !== -1) {
      var selector = decodeURIComponent(uri.substring(uri.indexOf('#scroll') + '#scroll'.length));
      var regex = /^=[#\.\[\]a-zA-Z0-9-_]+$/;
      if (selector.search(regex) != -1) {
        selector = selector.substring(1);
        $('html, body').animate({scrollTop: $(selector).offset().top - wt.getFixedTop() }, 1000);
      }
      return false;
    }
  }

  $('body').on('click', 'a[href*="#scroll"]', function () {
    wt.scrollTo($(this).attr('href'));
  });

  $('body').imagesLoaded( function() {
    window.setTimeout( wt.scrollTo(location.pathname + location.hash), 200 );
  });

}(jQuery, Drupal));


It requires ImagesLoaded and works within and across pages, and with responsive images. It also allows linking to IDs and classes by appending the proper CSS selector, e.g. /some-page#scroll=.my_class

It certainly is not a perfect solution, but our internal, HTML-trained editors can quickly create deep links to any section they want by adding #scroll=&lt;CSS_ID_OR_CLASS_SELECTOR&gt; to any link.