Question

当我点击第一个单击我按钮时，它跳过第二个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;
}

Answer 1

你的代码覆盖了它自己。

你应该做这样的事情：

<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

Answer 2

当你直接使用'button'标签时，两个按钮都适用于这两个按钮。要避免此问题，请为两个按钮分配唯一且不同的ID。然后使用ID在脚本中调用元素。这是固定代码---

   <div class="first">
        <h1>My Home Screen</h1>
        <button id='button1' type="button">Click Me!</button>
        <script>
            $("#button1").click(function() {
            $('html,body').animate({
            scrollTop: $(".second").offset().top},
            'slow');
            });
        </script>
    </div>
    <div class="second">
        <button  id='button2' type="button">Click Me!</button>
        <script>
            $("#button2").click(function() {
            $('html,body').animate({
            scrollTop: $(".third").offset().top},
            'slow');
            });
        </script>
    </div>
    <div class="third">
    </div>

jQuery滚动跳过div

2 个答案: