1 <!DOCTYPE html> 2 <html> 3 <head> 4 <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"> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 7 <title>bookmarkscroll案例</title> 8 <style type="text/css"> 9 /* CSS Document */ 10 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;} 11 ul,ol,li{list-style:none;} 12 input,button{margin:0;font-size:12px;vertical-align:middle;} 13 body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; } 14 table{border-collapse:collapse;border-spacing:0;} 15 a{color:#333;text-decoration:none;} 16 .head{position:fixed;top:0px;left:-350px;} 17 #box-bookmark{width:960px; height:100px;margin:20px 0px;text-align:center;} 18 .nav{position:relative;margin-bottom:20px;} 19 .nav{float:left;position:relative;left:50%;} 20 .nav li{margin-bottom:20px;} 21 .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;} 22 .nav li a:hover{ background:#ccc;} 23 .box{background:#ccc;width:960px;height:600px;margin:auto;margin-bottom:20px;} 24 .first{background:#333;} 25 .two{background:#666;} 26 .three{background:#999;} 27 .four{background:#000;} 28 #main{width:100%;} 29 </style> 30 </head> 31 <div class="head"> 32 <div id="box-bookmark"> 33 <ul class="nav"> 34 <li><a href="javascript:bookmarkscroll.scrollTo('first')" class="unselected">first</a></li> 35 <li><a href="javascript:bookmarkscroll.scrollTo('second')" class="unselected hovered">two</a></li> 36 <li><a href="javascript:bookmarkscroll.scrollTo('third')" class="unselected">three</a></li> 37 <li><a href="javascript:bookmarkscroll.scrollTo('fourth')" class="unselected">four</a></li> 38 </ul> 39 </div> 40 </div> 41 <div id="main"> 42 <div id="first"></div> 43 <div class="box first"> 44 </div> 45 <div id="second"></div> 46 <div class="box two"> 47 </div> 48 <div id="third"></div> 49 <div class="box three"> 50 </div> 51 <div class="box four"> 52 </div> 53 <div id="fourth"></div> 54 </div> 55 <script src="js/jquery-1.4.2.min.js" >//这里需要jquery</script> 56 <script> 57 //** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. 58 //** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09') 59 //** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7 60 61 var bookmarkscroll={ 62 setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest} 63 topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top 64 65 scrollTo:function(dest, options, hash){ 66 var $=jQuery, options=options || {} 67 var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref 68 if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){ 69 this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){ 70 if ($dest!==0 && hash) 71 location.hash=hash 72 }) 73 } 74 }, 75 76 urlparamselect:function(){ 77 var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid 78 return (param)? param[0].split('=')[1] : null 79 }, 80 81 init:function(){ 82 jQuery(document).ready(function($){ 83 var mainobj=bookmarkscroll 84 mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 85 var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid 86 if (urlselectid) //if id defined 87 setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100) 88 $('a[href^="#"]').each(function(){ //loop through links with "#" prefix 89 var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix 90 hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue 91 if (this.hash.length>1){ //if hash value is more than just "#" 92 var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)') 93 if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword 94 if ($bookmark.length==1 && !document.all) //non IE, or IE7+ 95 $bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'}) 96 $(this).click(function(e){ 97 mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash) 98 e.preventDefault() 99 }) 100 } 101 } 102 }) 103 }) 104 } 105 } 106 107 bookmarkscroll.init() 108 </script> 109 </body> 110 </html>