个人中心
gpt4 book ai didi

jQuery 滚动跳过一个 div

转载 作者：太空宇宙 更新时间：2023-11-04 11:19:12 24 4
gpt4 key购买 nike

当我点击第一个 click me 按钮时，它会跳过第二个 div 并直接进入第三个 div - 有人知道这是为什么吗？我认为这可能是由于 scrollTop 函数造成的？我希望第一次点击我将我带到第二个 div，第二次点击我按钮将我带到第三个 div。

HTML:

    <!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    <body>
        <div class="first">
            <h1>My Home Screen</h1>
            <button type="button">Click Me!</button>
            <script>
                $("button").click(function() {
                $('html,body').animate({
                scrollTop: $(".second").offset().top},
                'slow');
                });
            </script>
        </div>
        <div class="second">
            <button type="button">Click Me!</button>
            <script>
                $("button").click(function() {
                $('html,body').animate({
                scrollTop: $(".third").offset().top},
                'slow');
                });
            </script>
        </div>
        <div class="third">
        </div>
    </body>
</html>

CSS:

 h1 { 
    font-size: 12em;
    margin-top:0;
    text-align:center;
    font-weight: bold;
    color: white;
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    text-shadow: 2px 2px 4px #000000;
}

.first {
  width: auto;
  height: 100vh;
  background-image: url('home_screen.jpg');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: cover;
}

.second {
  width: auto;
  height: 100vh;
  background-image: url('second_screen.jpg');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: cover;
  }

.third {
width: auto;
height: 100vh;
background-image: url('third_screen.jpg');
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}

最佳答案

您的代码会自行覆盖。

你应该做这样的事情:

<button data-go=".second">Go to 2</button>
<button data-go=".third">Go to 3</button>

Javascript 应该是这样的:

$("button").click(function() {
   var go_to = $(this).data('go');

   $('html,body').animate({
       scrollTop: $(go_to).offset().top}, 'slow');
});

其中 data-go = 按下按钮时要滚动的 div 的选择器

检查这个有效的 JSBIN http://jsbin.com/qohucowopu/edit?html,css,js,output

关于jQuery 滚动跳过一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32934830/

24 4 0
文章推荐： linux - 压缩和删除具有特定年龄的文件
文章推荐： linux - 将 VPS 设置为流媒体复制器(用于在线广播)？
文章推荐： css - onmouseover 事件不适用于移动设备
文章推荐： linux - Perl DateTime::Locale::en 错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com