您的位置：首页 > Web前端 > JQuery

jQuery页面内滑动到锚点导航效果，回到顶部

2014-09-09 10:19 661 查看 
在看别人的网页的时候，有些页面很长，但是中滑动到固定锚点的导航，感觉效果甚是不错。于是便自己仿照着写了一个，代码不是很精辟，但是实现了效果。希望对一些初学者有帮助，也希望大声多给建议（最后有本效果的资源免费下载地址）……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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航