[jQuery] Smooth Scrolling for same-page links

[jQuery] Smooth Scrolling for same-page links

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">ok, now that the smooth scrolling has Klaus's blessing :) ... I thought I'd share some code I wrote to make it happen for all same-page links. It takes into account the difference in the way the various browsers treat href.<BR><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV>Oh yeah, now that Brandon has fixed that for .attr('href') in the latest SVN, the code could be shortened a great deal. Unfortunately, I don't have time just now to do that, so here is the old code, which won't break anything with latest SVN, and will also make things work in older jQuery versions (the Interface ScrollTo plugin is required):</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>  var docHashIndex = location.href.indexOf("#");</DIV><DIV>  if (docHashIndex != -1) {</DIV><DIV>    var docURL = location.href.slice(0,docHashIndex);</DIV><DIV>  } </DIV><DIV>  else {</DIV><DIV>    var docURL = location.href;</DIV><DIV>  }</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>  $('a[@href*="#"]').click(function() {</DIV><DIV>    var $linkHref = $(this).href();</DIV><DIV>    var linkHashIndex = $linkHref.indexOf('#');</DIV><DIV>    var linkURL = $linkHref.slice(0,linkHashIndex);</DIV><DIV>    var linkHash = $linkHref.slice(linkHashIndex);</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>    if (docURL == linkURL) {</DIV><DIV>      if ($(linkHash).length > 0 ) {</DIV><DIV>        $(linkHash).ScrollTo(400);   </DIV><DIV>        return false;   </DIV><DIV>      } else {</DIV><DIV>        $linkDest = $("[@name=" + linkHash.slice(1) +']');</DIV><DIV>        if ($linkDest.length > 0) {</DIV><DIV>          $linkDest.ScrollTo(400);</DIV><DIV>          return false;</DIV><DIV>        }</DIV><DIV>      }</DIV><DIV>    }</DIV><DIV>  });</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Hope that's helpful to someone.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Cheers,</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR></BODY></HTML>_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/