jQuery实现电梯导航效果

水深无声 2023-07-10 15:45 75阅读 0赞

原理  
每个盒子的索引值和每个按钮的索引一一对应,然后运动到相对应的盒子上 也就是scrollTop的值

成果图  
![在这里插入图片描述][20200303163719459.gif]

<style>
            .box2 { 
                position: relative;
                width: 600px;
                height: 500px;
                background-color: pink;
            }
            
            .box3 { 
                position: relative;
                width: 600px;
                height: 500px;
                background-color: rebeccapurple;
            }
            
            .box4 { 
                position: relative;
                width: 600px;
                height: 500px;
                background-color: gold;
            }
            
            .box5 { 
                position: relative;
                width: 600px;
                height: 500px;
                background-color: red;
            }
            
            .go { 
                background-color: gray;
                display: none;
                position: fixed;
                right: 10px;
                bottom: 100px;
            }
            
            button { 
                display: block;
            }
        </style>
    -----------------------------------------------------
    
    
        <div class="con">
            <div class="box2">手机区域</div>
            <div class="box3">电脑区域</div>
            <div class="box4">电视区域</div>
            <div class="box5">冰箱区域</div>
        </div>
        <div class="go">
            <button>back手机区域</button>
            <button>back电脑区域</button>
            <button>back电视区域</button>
            <button>back冰箱区域</button>
        </div>
        ---------------------------------------------
        <script>
            $(function() { 
                //刷新之后回到顶部
                $('html,body').stop().animate({ 
                        scrollTop: 0
                    })
                    //固定栏的显示隐藏
                var box3Top = $('.box3').offset().top;
                $(window).scroll(function() { 
                    if ($(document).scrollTop() >= box3Top) { 
                        $('.go').fadeIn();
                    } else { 
                        $('.go').fadeOut();
                    }
                })
            })
    
            // 电梯效果
            //点击按钮,就跳到对应的div
            $('.go button').click(function() { 
                //获取相对应的div到顶部的距离
                var boxTop = $('.con div').eq($(this).index()).offset().top;
                //跳到对应的div
                $('html,body').stop().animate({ 
                    scrollTop: boxTop
                })
            })
        </script>

[20200303163719459.gif]: https://img-blog.csdnimg.cn/20200303163719459.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery实现电梯导航效果

原理每个盒子的索引值和每个按钮的索引一一对应,然后运动到相对应的盒子上也就是scrollTop的值成果图 ![在这里插入图片描述][20200303163719

水深无声/ 2023年07月10日 15:45/ 0 赞/ 76 阅读

相关 jquery电梯导航的另外一种方法

/ 1、页面滚动到相应的第一楼的时候右边楼梯的索引按钮要去显示窗口的滚动条 scrollTop > 1T

比眉伴天荒/ 2022年10月02日 09:56/ 0 赞/ 184 阅读

相关 jquery 实现导航栏滑动效果

原文：[http://www.cnblogs.com/WebMobile/p/3926921.html][http_www.cnblogs.com_WebMobile_p_39

向右看齐/ 2022年08月11日 06:28/ 0 赞/ 300 阅读

相关 js实现导航菜单效果

<script type="text/javascript"> $(document).ready(function(){ var temp;

淩亂°似流年/ 2022年08月07日 06:00/ 0 赞/ 232 阅读

相关 jQuery实战_360导航效果（节点操作练习）

模仿360导航栏，我们要做的效果： ![这里写图片描述][70] 鼠标移上去的时候，会显示出一个”百度一下，你就知道”的提示框。可以直接写在原html中，为了练习

╰+攻爆jí腚メ/ 2022年05月22日 12:41/ 0 赞/ 176 阅读

相关 jquery实现二级导航下拉菜单效果实例

大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。使用JQue

不念不忘少年蓝@/ 2022年01月28日 23:59/ 0 赞/ 398 阅读

相关实现单页面导航效果的jQuery插件 - SMINT

日期：2013-6-14 来源：[GBin1.com][] ![实现单页面导航效果的jQuery插件 - SMINT][jQuery_ - SMINT] [在线演示][L

分手后的思念是犯贱/ 2022年01月22日 09:11/ 0 赞/ 263 阅读

相关实现导航栏吸附效果

以下是完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

野性酷女/ 2022年01月19日 20:09/ 0 赞/ 349 阅读

相关 jquery电梯导航

<body> <div class="main">  <div class="maintop">

比眉伴天荒/ 2022年01月13日 02:43/ 0 赞/ 241 阅读

相关 JQuery实现导航效果、新闻滚动、广告效果、横向滚动

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果 ![1333441380_1207.png][]

迷南。/ 2021年09月12日 08:42/ 0 赞/ 497 阅读