Posted By

dottDesign on 08/21/10


Tagged

javascript textmate


Versions (?)

Smooth Scrolling Links


 / Published in: Other
 

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. //** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
  4. //** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
  5. //** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7
  6.  
  7. var bookmarkscroll={
  8. setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest}
  9. topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top
  10.  
  11. scrollTo:function(dest, options, hash){
  12. var $=jQuery, options=options || {}
  13. var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref
  14. if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
  15. this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){
  16. if ($dest!==0 && hash)
  17. location.hash=hash
  18. })
  19. }
  20. },
  21.  
  22. urlparamselect:function(){
  23. var param=window.location.search.match(/scrollto=[w-_,]+/i) //search for scrollto=divid
  24. return (param)? param[0].split('=')[1] : null
  25. },
  26.  
  27. init:function(){
  28. jQuery(document).ready(function($){
  29. var mainobj=bookmarkscroll
  30. mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
  31. var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid
  32. if (urlselectid) //if id defined
  33. setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100)
  34. $('a[href^="#"]').each(function(){ //loop through links with "#" prefix
  35. var hashvalue=this.getAttribute('href').match(/#w+$/i) //filter links at least 1 character following "#" prefix
  36. hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue
  37. if (this.hash.length>1){ //if hash value is more than just "#"
  38. var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)')
  39. if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword
  40. if ($bookmark.length==1 && !document.all) //non IE, or IE7+
  41. $bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'})
  42. $(this).click(function(e){
  43. mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash)
  44. e.preventDefault()
  45. })
  46. }
  47. }
  48. })
  49. })
  50. }
  51. }
  52.  
  53. bookmarkscroll.init()
  54. </script>
  55. <h1>TITLE - <a href="javascript:bookmarkscroll.scrollTo('ANCHOR')" style="color:#82B62D !important;">LINK</a></h1>
  56.  
  57.  
  58.  
  59. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
  60. <p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula.
  61. </p>
  62. <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
  63.  
  64.  
  65. <div id="ANCHOR">
  66. </div>

Report this snippet  

You need to login to post a comment.