锚点定位 跳转

Html

Css

Js

    
定位1
    
定位2
    
定位3
    
定位4
    
定位5
    
定位6

.nav { position:fixed; top:0px; left:0px; display:flex; width:100%; height:50px; background-color:darkgray; } .nav .menu { position:relative; flex:1; text-align:center; line-height:50px; cursor:pointer; } .nav .menu:hover { background-color:#0000FF; color:white; } .nav .menu.active { color:white; } .nav .bar { position:absolute; top:0; left:0; width:16.6666%; height:50px; background-color:#0000FF; } .main .box { margin-top:50px; width:100%; height:800px; line-height:400px; font-size:36px; font-weight:bold; color:#0000FF; text-align:center; border:1px solid black; }

$(window).ready(function() { $('#nav > .menu').on('click', function() { var $this = $(this); $this.addClass('active').siblings('.menu').removeClass('active'); $("html,body").animate({ scrollTop: $("#main > .box").eq($this.index() - 1).offset().top }, 300); $("#bar").animate({ left: $this.offset().left }, 300); }); });

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.1

PS:请下载到本地测试

使用说明：

1，该功能用纯jQuery代码编写，（模拟html中 a标签 的锚点跳转定位 锚点 ）。

2，适用于单页面位置跳转定位。

3，使用jQuery中的animate方法，使锚点，定位同时都有测动和跳转动画效果。