Question

我试图找到关于如何在两个滚动位置之间切换的答案，我相信我发现的一些答案对我来说有点太复杂了。由于我可能不知道如何谷歌正确的问题我认为我终于问社区。

最终目标是创建一个大型的手风琴类型页面，在单击“打开项目”按钮时打开项目详细信息。

我想要解决的第一个挑战是点击一般的“打开项目”按钮，它会将我向下滚动到按钮的顶部。然后再次单击时将我向上滚动到父div的顶部。该按钮最终会说“关闭项目”。

问：

首次点击“打开项目”，向下滚动到按钮的顶部
再次点击“打开项目”，将我滚动到按钮父div的顶部
对具有相同类名的多个按钮执行this（）操作

我已经看过线程了 jQuery click / toggle between two functions并且在尝试应用scrollTo功能时，答案让我有点失落。我尝试了许多尝试但后来尝试自己解决。请善待。我正在学习。

任何帮助都会很棒。这是我的prototype和jQuery：

$(".buttonToggleProjectDetails").click(function() {
  if ($(this) !== $(this).offset().top;) {
  $('html,body').animate({
    scrollTop: $(this).offset().top},
    'slow');
  } else {
    $('html,body').animate({
    scrollTop: $(this).parent().offset().top},'slow');
  }
});

Answer 1

您的条件（代码的第2行）没有任何意义，因为您正在检查jQuery对象是否不等于数字，这将始终为{ {1}}。

在你的问题中阅读“问”，我认为你想要：

移动到奇数点击按钮的顶部。
在偶数点击时移动到父容器的顶部。
分别为每个按钮提供上述功能。

<强>代码：

true

您可以找到jsfiddle here的更新版本，或者查看以下代码段。

<强>段：

var
  /* Cache the buttons. */
  buttons = $(".buttonToggleProjectDetails"),

  /* Create an array of flags. */
  flags = Array(buttons.length);

/* Set the 'click' event. */
buttons.click(function() {
  var
    /* Define a variable to store the element whose offset will be used. */
    element,

    /* Cache the button. */
    button = $(this),

    /* Find the index of the button in the buttons collection. */
    index = [].indexOf.call(buttons, this);

  /* Reverse the flag. */
  flags[index] = !flags[index];

  /* Determine the element and the content of the button based on the click. */
  if (flags[index]) {
    element = button;
    button.html("Close Project");
  } else {
    element = button.parent();
    button.html("Open Project");
  }

  /* Animate the scroll. */
  $("html, body").animate({scrollTop: element.offset().top}, "slow");
});

/* ----- JavaScript ----- */
var
  /* Cache the buttons. */
  buttons = $(".buttonToggleProjectDetails"),
  
  /* Create an array of flags. */
  flags = Array(buttons.length);

/* Set the 'click' event. */
buttons.click(function() {
  var
    /* Define a variable to store the element whose offset will be used. */
    element,
    
    /* Cache the button. */
    button = $(this),
    
    /* Find the index of the button in the buttons collection. */
    index = [].indexOf.call(buttons, this);
  
  /* Reverse the flag. */
  flags[index] = !flags[index];
  
  /* Determine the element and the content of the button based on the click. */
  if (flags[index]) {
    element = button;
    button.html("Close Project");
  } else {
    element = button.parent();
    button.html("Open Project");
  }

  /* Animate the scroll. */
  $("html, body").animate({scrollTop: element.offset().top}, "slow");
});

/* ----- CSS ----- */

* {
  padding: 0px;
  margin: 0px;
}

.projectContainer {
  width: 100%;
  background-color: aqua;
}

.projectHeader {
  max-width: 960px;
  width: 100%;
  height: 100vh;
  background-color: #ff7900;
  margin: 0 auto;
  position: relative;
}

.buttonToggleProjectDetails {
  padding: 10px 0;
  background-color: black;
  color: white;
  width: 200px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
}

.projectDetails {
  max-width: 960px;
  width: 100%;
  height: 3000px;
  background-color: #FC5E61;
  margin: 0 auto;
  position: relative;
}

.one {
  background-color: blueviolet;
}

.two {
  background-color: antiquewhite;
}

.three {
  background-color: aliceblue;
}

.four {
  background-color: coral;
}

.five {
  background-color: darkcyan;
}

修改

要检查 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="projectContainer"> <div class="projectHeader one"> <div class="buttonToggleProjectDetails">Open Project</div> </div> <div class="projectHeader two"> <div class="buttonToggleProjectDetails">Open Project</div> </div> <div class="projectHeader three"> <div class="buttonToggleProjectDetails">Open Project</div> </div> <div class="projectHeader four"> <div class="buttonToggleProjectDetails">Open Project</div> </div> <div class="projectHeader five"> <div class="buttonToggleProjectDetails">Open Project</div> </div> </div>是否位于视口的顶部，您可以使用：

this

jquery切换单击滚动到并向后滚动

1 个答案: