JQuery 锚点连接屏幕滚动

我就是我 2022-06-08 08:28 200阅读 0赞

<!DOCTYPE html>
    <html class="no-js" lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <meta charset="utf-8">
            <script src="jquery.min.js"></script>
    
                </head>
    <script type="text/javascript">
    $(function(){
        
           $(window).scroll(function(){
                 //为页面添加页面滚动监听事件
                      var wst =  $(window).scrollTop() //滚动条距离顶端值
                     for (i=1; i<6; i++){             //加循环
                      if($("#a"+i).offset().top<=wst){ //判断滚动条位置
                         $('#nav a').css("background-color","white"); //清除c类
                         $("#a"+i+i).css("background-color","red");    //给当前导航加c类
                         }
                     }         
          })
           $('#nav a').click(function(){
            $('#nav a').css("background-color","white");//清除c类
            $(this).css("background-color","red");//给当前导航加c类
            });
    });
    </script>
    <div id="nav" style="position:fixed;width:500px;height:200px; top:10px;right:10px;" >
    <a id="a11" href="#a1" class="c">书籍目录</a>
    <a id="a22" href="#a2">作品试读</a>
    <a id="a33" href="#a3">购买须知</a>
    <a id="a44" href="#a4">注意事项</a>
    <a id="a55" href="#a5">用户点评</a>
    </div>
    <br /><br />
    页面结构如下：
    <div id="a1">测试</div>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    </div>
    <div id="a2">测试</div>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    </div>
    <div id="history">
    
        <p>history内容</p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    </div>
    <div id="a3">测试</div>
    <div id="history">
    
        <p>history内容</p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    </div>
    <div id="a4">测试</div>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    </div>
    <div id="a5">测试
    <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      <p>     </p>
    </div>
    </body></html>

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue锚点滚动问题v-scroll-to

使用v-scroll-to 可解决锚点问题，在offset中可使用三目运算符 v-scroll-to="\{ element: ‘\v’ + index, offset:

刺骨的言语ヽ痛彻心扉/ 2023年06月30日 12:54/ 0 赞/ 21 阅读

相关 scroll-behavior属性：滚动框指定滚动行为及锚点

1、scroll-behavior属性：auto（滚动条立即滚动） / smooth（窗口平稳滚动） / inherit / initial / unset 2、锚点

「爱情、让人受尽委屈。」/ 2023年01月01日 03:51/ 0 赞/ 162 阅读

相关 jquery 锚点滚动

$("html,body").animate(\{scrollTop:$("\li\_hou").offset().top\},800) redis 控制台使用：

╰半夏微凉°/ 2022年08月09日 03:27/ 0 赞/ 184 阅读

相关 JQuery 锚点连接屏幕滚动

<!DOCTYPE html> <html class="no-js" lang="en"><head> <meta http-equiv="conte

我就是我/ 2022年06月08日 08:28/ 0 赞/ 201 阅读

相关 html锚点

锚点是网页制作中超级链接的一种，又叫[命名锚记][Link 1]。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。英文名：anchor 使用命名锚记可以

亦凉/ 2022年06月07日 08:41/ 0 赞/ 257 阅读

相关点击锚点平滑滚动效果

获取a的href的锚点连接target，通过 targetOffset=$(target).offset().top; 获取该锚点到浏览器顶部的距离，然后给body添

╰+攻爆jí腚メ/ 2022年06月01日 21:14/ 0 赞/ 269 阅读

相关锚点滚动效果

锚点滚动效果点击锚点后滚动效果 $('a[href=],area[href=]').click(function() { if(location.

Love The Way You Lie/ 2022年02月19日 03:57/ 0 赞/ 306 阅读

相关 Jquery锚点缓慢移动到目标位置

非常简单的代码，不需要再使用插件！页面代码如下 <!DOCTYPE html> <html> <head> <title>锚点缓

缺乏、安全感/ 2022年01月23日 14:59/ 0 赞/ 312 阅读

相关锚点

$('.kk').on('click', function(e) { var thisId = $(this).attr('id');

男娘i/ 2021年09月19日 11:16/ 0 赞/ 459 阅读

相关 html 锚点

锚点: 在一张网页中进行资源跳转 <a href="锚点名">点击访问名称</a> 跳转到锚点name处 <a name=

我不是女神ヾ/ 2021年07月24日 22:22/ 0 赞/ 506 阅读