jQuery頁面內滑動到錨點導航效果，回到頂部
阿新 • • 發佈：2019-02-03
在看別人的網頁的時候，有些頁面很長，但是中滑動到固定錨點的導航，感覺效果甚是不錯。於是便自己仿照著寫了一個，程式碼不是很精闢，但是實現了效果。希望對一些初學者有幫助，也希望大聲多給建議（最後有本效果的資源免費下載地址）……
js程式碼：
/** * @author Administrator */ $(document).ready(function(event){ //主要的 $("#menu a,.this").click(function(event){ var index=this.title; var id="#index0"+index; $("html,body").animate({scrollTop: $(id).offset().top}, 1000); }); //返回頂部 $("#getTop").click(function(event){ $("body,html").animate({scrollTop: 0},800); }); $(window).scroll(function(){ t = $(document).scrollTop(); if(t>500){ $('#bottomNavigation').show("slow"); return false; }else{ $('#bottomNavigation').hide("slow"); } }); //左邊的定位導航顯示位置，x越大，越靠左邊 function position(x,y){ //獲取可視視窗寬度 var windowW=$(document.body).width();//1423 //獲取主體div的寬度 var divW=$(".container").width(); $("#bottomNavigation").css("right",(windowW/2-divW/2-x)+"px"); $("#bottomNavigation").css("bottom",(y)+"px"); } position(80,50); });
html程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>getTop</title> <meta name="author" content="Administrator" /> <link href="getTop.css" type="text/css" rel="stylesheet" /> <script src="../jquery.min.11.1.js" type="text/javascript"></script> <script src="index.js" type="text/javascript"></script> <!-- Date: 2014-09-05 --> </head> <body> <div class="navigation" id="menu"> <a href="javascript:void(0)" title="1">A</a> <a href="javascript:void(0)" title="2">B</a> <a href="javascript:void(0)" title="3">C</a> <a href="javascript:void(0)" title="4">D</a> <a href="javascript:void(0)" title="5">E</a> </div> <div class="container" id="index01" style="background:#E1EED2">A</div> <div class="container" id="index02" style="background:#F1EED3">B</div> <div class="container" id="index03" style="background:#C2C2C2">C</div> <div class="container" id="index04" style="background:#E69B02">D</div> <div class="container" id="index05" style="background:#FF4200">E</div> <div class="bottomNavigation" id="bottomNavigation"> <a class="this" href="javascript:void(0)" title="1">A</a> <a class="this" href="javascript:void(0)" title="2">B</a> <a class="this" href="javascript:void(0)" title="3">C</a> <a class="this" href="javascript:void(0)" title="4">D</a> <a class="this" href="javascript:void(0)" title="5">E</a> <a id="getTop" href="javascript:void(0)">top</a> </div> </body> </html>
css程式碼：
*{ margin:0; padding:0; } body{ background:#333333; } .navigation{ margin:0 auto; width:500px; height:100px; } .navigation a{ width:100px; height:100px; font-size:30px; line-height: 100px; text-align:center; background: #E69B02; float:left; display:block; } .navigation a:link{ color:#000000; text-decoration: none; } .navigation a:visited{ color:#000000; } .navigation a:hover{ background:#A8CF33; } .container{ margin:30px auto; width:1002px; height: 800px; font-size:100px; text-align:center; } .bottomNavigation{ width:25px; height:150px; position: fixed; background: #0093DD; display:none; } .bottomNavigation a{ width:25px; height:25px; font-size:12px; line-height: 25px; text-align:center; background: #E69B02; display:block; } .bottomNavigation a:link{ color:#000000; text-decoration: none; } .bottomNavigation a:visited{ color:#000000; } .bottomNavigation a:hover{ background:#A8CF33; }
資源下載地址：http://download.csdn.net/detail/u014703834/7882775