Scrolling HTML bookmarks

[jscheuer1]

1) Script Title: Scrolling HTML bookmarks

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/bookmarkscroll.htm

3) Describe problem: When the yoffset is set, because of the callback function the page jumps back to the named anchor after the smooth animation. So if the yoffset is like -100, after the smooth scrolling animation, the page jumps back down the 100px difference between where it scrolled to and the actual location of the named anchor.

This can be remedied by saving the current scroll position, going to the hash first, then jumping directly back to the saved postion. Now the hash shows in the URL and the page hasn't appeared to have moved at all and we can smoothly scroll to the named anchor +- the yoffset with no need for a callback.

Replacement script:


//** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
//** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7

//** Unofficial Update Feb 24rth, '11 - fixed jumping to hash after scroll if yoffset is set
// See: http://www.dynamicdrive.com/forums/showthread.php?p=270295#post270295

var bookmarkscroll={
setting: {duration:3000, yoffset:-100}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest}
topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top

scrollTo:function(dest, options, hash){
var $=jQuery, options=options || {}
var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref
var current = this.$body.scrollTop();
if ($dest!==0 && hash){
location.hash=hash;
this.$body.scrollTop(current);
}
if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
// callback function removed from animation:
this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration))
}
},

urlparamselect:function(){
var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid
return (param)? param[0].split('=')[1] : null
},

init:function(){
jQuery(document).ready(function($){
var mainobj=bookmarkscroll
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid
if (urlselectid) //if id defined
setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100)
$('a[href^="#"]').each(function(){ //loop through links with "#" prefix
var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix
hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue
if (this.hash.length>1){ //if hash value is more than just "#"
var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)')
if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword
if ($bookmark.length==1 && !document.all) //non IE, or IE7+
$bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'})
$(this).click(function(e){
mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash)
e.preventDefault()
})
}
}
})
})
}
}

bookmarkscroll.init()