如何使Jquery scrollTop转到正确的位置？

问题描述 投票：3回答：1

任何人都可以建议为什么scrollTop不滚动到正确的div的顶部？ 我这样使用它：

$("#generationbutton").click(function() {
      $('.wrapperright').animate({
          scrollTop: $("#generationanxiety").offset().top
        },
        1500);

这是我的完整代码：

$("#generationbutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#generationanxiety").offset().top
    },
    1500);

  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div

$('.wrapperright').scroll(function() {
  if ($('.wrapperright').scrollTop() > (topofDiv + height)) {
    console.log('This is where the div bottom leaves the window.')
    $('#generationbutton').addClass('opacity');

  } else {
    $('#generationbutton').removeClass('opacity');
  }
});


$("#lekhenabutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#lekhenaporter").offset().top
    },
    1500);

  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});


var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div

$('#lekhenaporter').scroll(function() {
  if ($('#lekhenaporter').scrollTop() > (topofDiv + height)) {
    console.log('This is where the div bottom leaves the window.')
    $('#lekhenabutton').addClass('opacity');

  } else {
    $('#lekhenabutton').removeClass('opacity');
  }
});


$("#bodysbutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#bodys").offset().top
    },
    1500);

  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

$("#glitterbutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#glitter").offset().top
    },
    1500);

  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

$("#juicebutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#juice").offset().top
    },
    1500);

  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100vw;
  margin: 0;
  grid-gap: 0;
}

.wrapperleft {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-template-rows: auto;
  width: 50vw;
  max-height: 100%;
  overflow-y: hidden;
  margin: 0;
}

.bio {
  margin: 20px;
}

.bio ul {
  margin-top: 20px;
  padding: 0;
}

.bio h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  margin: 0;
  border-bottom: 2px solid #000;
  display: inline;
}

.bio ul li {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  padding-bottom: 10px;
  cursor: pointer;
}

.back {
  position: absolute;
  bottom: 0;
  margin-left: 20px;
}

.back h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.5em;
}

.wrapperright {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-template-rows: 200px;
  border-left: 2px solid #000;
  width: 50vw;
  overflow: auto;
}

.wrapperright img {
  width: 50vw;
  max-height: 100%;
  display: block;
}

.opacity {
  opacity: 0.4;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
}

.display {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.wrapperright div {
  max-height: 100%;
  max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">

  <div class="wrapperleft">
    <div class="bio">

      <ul>

        <div id="generationbutton" class="opacity">
          <li>01 Generation Anxiety</li>
        </div>
        <div id="lekhenabutton" class="opacity">
          <li>02 Lekhenaporter.com</li>
        </div>
        <div id="bodysbutton" class="opacity">
          <li>03 Body(s) Under Negotiation</li>
        </div>
        <div id="glitterbutton" class="opacity">
          <li>04 Glitter Boy Cosmetics</li>
        </div>
        <div id="juicebutton" class="opacity">
          <li>05 Juice WRLD Cover Art</li>
        </div>
      </ul>
    </div>

    <div class="back">
      <h1>← Back</h1>
    </div>

  </div>

  <div class="wrapperright">

    <div class="display">
      <img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
    </div>

    <div id="generationanxiety">
      <img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
    </div>

    <div id="lekhenaporter">

      <img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
    </div>

    <div id="bodys">
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>

    <div id="glitter">
      <img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
    </div>

    <div id="juice">
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>

  </div>


</div>

View on CodePen

jquery scrolltop
1个回答
1
投票

jQuery的offset()获取元素相对于文档的坐标。

因此，例如，您将.wrapperright的滚动位置设置为文档顶部和#generationanxiety顶部之间的距离。这似乎不是你想要的价值。

另请注意，当#generationanxiety滚动时，.wrapperright的偏移会发生变化。 所以scrollTop的.wrapperright根据其当前滚动位置设置为不同的值。

我建议将scrollTop的.wrapperright位置添加到目标元素的偏移顶部：

 scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top

我还建议在动画之前添加.stop(true,false)以防止排队。 见.stop()。

这是一个演示：

$("#generationbutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div

$('.wrapperright').scroll(function() {
  if ($('.wrapperright').scrollTop() > (topofDiv + height)) {
    $('#generationbutton').addClass('opacity');
  } else {
    $('#generationbutton').removeClass('opacity');
  }
});


$("#lekhenabutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});


var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div

$('#lekhenaporter').scroll(function() {
  if ($('#lekhenaporter').scrollTop() > (topofDiv + height)) {
    $('#lekhenabutton').addClass('opacity');
  } else {
    $('#lekhenabutton').removeClass('opacity');
  }
});


$("#bodysbutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

$("#glitterbutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

$("#juicebutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100vh;
  margin: 0;
  grid-gap: 0;
}

.wrapperleft {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-template-rows: auto;
  width: 50vw;
  max-height: 100%;
  overflow-y: hidden;
  margin: 0;
}

.bio {
  margin: 20px;
}

.bio ul {
  margin-top: 20px;
  padding: 0;
}

.bio h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  margin: 0;
  border-bottom: 2px solid #000;
  display: inline;
}

.bio ul li {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  padding-bottom: 10px;
  cursor: pointer;
}

.back {
  position: absolute;
  bottom: 0;
  margin-left: 20px;
}

.back h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.5em;
}

.wrapperright {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-template-rows: 200px;
  border-left: 2px solid #000;
  width: 50vw;
  overflow: auto;
}

.wrapperright img {
  width: 50vw;
  max-height: 100%;
  display: block;
}

.opacity {
  opacity: 0.4;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
}

.display {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

.wrapperright div {
  max-height: 100%;
  max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">

  <div class="wrapperleft">
    <div class="bio">

      <ul>

        <div id="generationbutton" class="opacity">
          <li>01 Generation Anxiety</li>
        </div>
        <div id="lekhenabutton" class="opacity">
          <li>02 Lekhenaporter.com</li>
        </div>
        <div id="bodysbutton" class="opacity">
          <li>03 Body(s) Under Negotiation</li>
        </div>
        <div id="glitterbutton" class="opacity">
          <li>04 Glitter Boy Cosmetics</li>
        </div>
        <div id="juicebutton" class="opacity">
          <li>05 Juice WRLD Cover Art</li>
        </div>
      </ul>
    </div>

    <div class="back">
      <h1>← Back</h1>
    </div>

  </div>

  <div class="wrapperright">

    <div class="display">
      <img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
    </div>

    <div id="generationanxiety">
      generationanxiety
      <img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
    </div>

    <div id="lekhenaporter">
      lekhenaporter
      <img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
    </div>

    <div id="bodys">
      bodys
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>

    <div id="glitter">
      glitter
      <img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
    </div>

    <div id="juice">
      juice
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>

  </div>

</div>

有关： Why is position().top changing when I scroll the parent?

编辑

正如您所提到的，最后一张图片正在裁剪。我注意到.wrapper设置为height: 100vw而不是height: 100vh（视口宽度而不是高度）。我编辑了演示来反映这种变化。

此外，<ul>元素只能包含"zero or more <li> elements"，因此作为<div>的孩子的<ul>无效。我建议删除<div>元素并相应地调整JavaScript。

我还建议优化您的代码，使其更加模块化和DRY (Don't Repeat Yourself)。如果您有兴趣，这里有一个detailed post，描述了类似环境中的一些有益的优化。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.