title: Smooth Scrolling Interferes with Hash Mark
body: <p>EDIT (12/26/2012)</p>
  
  <p>I found the following code which does exactly what I want, except now when a page's URL has a trailing slash (e.g. example.com/page/), the page doesn't scroll. Works fine if the page's URL ends with '.php' or '.html', etc. Any thoughts on how to get the following script to work with the trailing slash in a URL?</p>
  
  <pre><code>jQuery('a[href*=#]').bind('click', function(e) {
      // Get the target
      var target = jQuery(this).attr("href"); 
  
      // prevent the "normal" behaviour which would be a "hard" jump
      e.preventDefault(); 
  
      // perform animated scrolling by getting top-position of target-
      // element and set it as scroll target
      jQuery('html, body').stop().animate({
          scrollTop: jQuery(target).offset().top 
      }, 500, function() {
          location.hash = target;  //attach the hash (#jumptarget) to the pageurl
      });
  
      return false;
  });
  </code></pre>
  
  <hr>
  
  <p>I've been using a script successfully for the last couple of years, but have recently run into some issues with it. Basically what the script does is scroll the page to a specific point. This happens with link anchors. For example, if one link is:</p>
  
  <pre><code>&lt;a href="#anchor"&gt;anchor link&lt;/a&gt;
  </code></pre>
  
  <p>The page will <i>smoothly</i> scroll to that anchor on the page:</p>
  
  <pre><code>&lt;a name="anchor"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Or:</p>
  
  <pre><code>&lt;a id="anchor"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The issue that occurs arises when some other JS is being used in the page which requires a link to be formatted as such:</p>
  
  <pre><code>&lt;a href="#"&gt;other link&lt;/a&gt;
  </code></pre>
  
  <p>When this "other link" is clicked, the page will smoothly scroll, BUT to the top or bottom of the page where there is NO anchor.</p>
  
  <p>What should happen when this "other link" is clicked? The other JS action should occur (which it does), but the smooth page scrolling script should not occur.</p>
  
  <p>Here's a working example from where I got this script:  </p>
  
  <p><a href="http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html" rel="nofollow">http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html</a></p>
  
  <p>Here's the JS in full:</p>
  
  <pre><code>Scroller = {
      // control the speed of the scroller.
      // dont change it here directly, please use Scroller.speed=50;
      speed: 10,
  
      // returns the Y position of the div
      gy: function (d) {
          gy = d.offsetTop
          if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
          return gy
      },
  
      // returns the current scroll position
      scrollTop: function (){
          body = document.body
          d = document.documentElement
  
          if (body &amp;&amp; body.scrollTop) return body.scrollTop
          if (d &amp;&amp; d.scrollTop) return d.scrollTop
          if (window.pageYOffset) return window.pageYOffset
  
          return 0
      },
  
      // attach an event for an element
      // (element, type, function)
      add: function(event, body, d) {
          if (event.addEventListener) return event.addEventListener(body, d,false)
          if (event.attachEvent) return event.attachEvent('on'+body, d)
      },
  
      // kill an event of an element
      end: function(e){
          if (window.event) {
              window.event.cancelBubble = true
              window.event.returnValue = false
  
              return;
          }
  
          if (e.preventDefault &amp;&amp; e.stopPropagation) {
            e.preventDefault()
            e.stopPropagation()
          }
      },
  
      // move the scroll bar to the particular div.
      scroll: function(d){
          i = window.innerHeight || document.documentElement.clientHeight;
          h = document.body.scrollHeight;
          a = Scroller.scrollTop()
  
          if (d&gt;a)
              if(h-d&gt;i)
                  a += Math.ceil((d-a)/Scroller.speed)
              else
                  a += Math.ceil((d-a-(h-d))/Scroller.speed)
          else
              a = a + (d-a)/Scroller.speed;
  
          window.scrollTo(0,a)
  
          if (a==d || Scroller.offsetTop==a)
              clearInterval(Scroller.interval)
  
          Scroller.offsetTop = a
      },
  
      // initializer that adds the renderer to the onload function of the window
      init: function(){
          Scroller.add(window,'load', Scroller.render)
      },
  
      // this method extracts all the anchors and validates then as # and attaches the events.
      render: function(){
          a = document.getElementsByTagName('a');
  
          Scroller.end(this);
  
          window.onscroll
  
          for (i=0;i&lt;a.length;i++) {
              l = a[i];
  
              if (l.href &amp;&amp; l.href.indexOf('#') != -1 &amp;&amp; ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
                  Scroller.add(l,'click',Scroller.end)
  
                  l.onclick = function(){
                      Scroller.end(this);
  
                      l = this.hash.substr(1);
                      a = document.getElementsByTagName('a');
  
                      for (i=0;i&lt;a.length;i++) {
                         if (a[i].name == l){
                              clearInterval(Scroller.interval);
  
                              Scroller.interval = setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
                          }
                      }
                  }
              }
          }
      }
  }
  
  // invoke the initializer of the scroller
  Scroller.init();
  </code></pre>
  
  <p>I would think that there is a way to write the script so that if the <code>href</code> is equal to just the hash mark <code>#</code> without any text after the hash, that the scroller wouldn't be triggered.</p>
  
  <p>Does anyone have any better ideas? </p>
  
  <p>Thanks in advance!</p>