首页 文章

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

提问于
浏览 次
0

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

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

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

问：

  • 首次单击"open project"以向下滚动到按钮顶部

  • 再次单击"open project"将我滚动到按钮父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');
  }
});
jquery

1 回答

  • 0

    您的条件（代码的第2行）没有任何意义，因为您正在检查 jQuery 对象是否不等于一个数字，它始终是 true .

    通过在你的问题中阅读"The ask"，我认为你想要：

    • 移动到奇数点击按钮的顶部 .

    • 在偶数点击时移动到父容器的顶部 .

    • 每个按钮的上述功能分开 .

    Code:

    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");
});

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

    Snippet:

    /* ----- 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;
}

    <!----- HTML ----->
<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>

    Edit:

    要检查 this 是否位于视口的顶部，您可以使用：

    if ($(this).offset().top == $("html").scrollTop())
    回复于

相关问题