html5--bookmarkscroll
[task]<!DOCTYPE html>
<html>
<head>
<script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>bookmarkscroll案例</title>
<style type="text/css">
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
.head{position:fixed;top:0px;left:-350px;}
#box-bookmark{width:960px; height:100px;margin:20px 0px;text-align:center;}
.nav{position:relative;margin-bottom:20px;}
.nav{float:left;position:relative;left:50%;}
.nav li{margin-bottom:20px;}
.nav li a{display:block;padding:0 11px;background:#f5f5f5; height:24px; border:1px solid #ccc; border-radius:5px; -webkit-border-radius:5px; line-height:24px;}
.nav li a:hover{ background:#ccc;}
.box{background:#ccc;width:960px;height:600px;margin:auto;margin-bottom:20px;}
.first{background:#333;}
.two{background:#666;}
.three{background:#999;}
.four{background:#000;}
#main{width:100%;}
</style>
</head>
<div>
<div id="box-bookmark">
<ul>
<li><a href="javascript:bookmarkscroll.scrollTo('first')">first</a></li>
<li><a href="javascript:bookmarkscroll.scrollTo('second')">two</a></li>
<li><a href="javascript:bookmarkscroll.scrollTo('third')">three</a></li>
<li><a href="javascript:bookmarkscroll.scrollTo('fourth')">four</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="first"></div>
<div>
</div>
<div id="second"></div>
<div>
</div>
<div id="third"></div>
<div>
</div>
<div>
</div>
<div id="fourth"></div>
</div>
<script src="js/jquery-1.4.2.min.js" >//这里需要jquery</script>
<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
var bookmarkscroll={
setting: {duration:1000, yoffset:0}, //{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
if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){
if ($dest!==0 && hash)
location.hash=hash
})
}
},
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()
</script>
</body>
</html>
[/task]
