Question

我已经掌握了一些功能，某些地方被破坏了，我无法捕捉到错误。点击第一部分，不会转到第一部分。我可能错过了redrawDotNav上的某些内容。如果有人可以找我并让它变得更好，那会很好:-) 谢谢，

＆＃13;

$(window).scroll(function() {
  redrawDotNav();
});

$('a.sec01').click(function() {
  $('html, body').animate({
    scrollTop: 0
  }, 1000, function() {});
  return false;
});
$('a.sec01').click(function() {
  $('html, body').animate({
    scrollTop: $('#sec02').offset().top
  }, 1000, function() {});
  return false;
});
$('a.sec03').click(function() {
  $('html, body').animate({
    scrollTop: $('#sec03').offset().top
  }, 1000, function() {});
  return false;
});
$('a.sec04').click(function() {
  $('html, body').animate({
    scrollTop: $('#sec04').offset().top
  }, 1000, function() {});
  return false;
});

function redrawDotNav() {
  var section1Top = 0;
  var section2Top = $('#sec02').offset().top - (($('#sec03').offset().top - $('#sec02').offset().top) / 2);
  var section3Top = $('#sec03').offset().top - (($('#sec04').offset().top - $('#sec03').offset().top) / 2);
  var section4Top = $('#sec04').offset().top - (($(document).height() - $('#sec04').offset().top) / 2);

  $('.sticky-indicators a').removeClass('active');


  if ($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top) {
    $('.sticky-indicators a.sec01').addClass('active');

  } else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top) {
    $('.sticky-indicators a.sec02').addClass('active');

  } else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top) {
    $('.sticky-indicators a.sec03').addClass('active');


  } else if ($(document).scrollTop() >= section4Top) {
    $('.sticky-indicators a.sec04').addClass('active');
  }

}

＆＃13;

img {
  height: 400px;
  width: 100%;
  float: left;
}
.col {
  float: left;
  width: 100%;
  border: 1px solid red;
}
.sticky-indicators {
  position: fixed;
  top: 0;
  right: 50px;
  background: white;
  width:200px;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="sticky-indicators">
  <ul>
    <li><a href="#sec01" class="sec01">Section 01</a>
    </li>
    <li><a href="#sec02" class="sec02">Section 02</a>
    </li>
    <li><a href="#sec03" class="sec03">Section 03</a>
    </li>
    <li><a href="#sec04" class="sec04">Section 04</a>
    </li>
  </ul>
</nav>
<div class="col xs-col-12 xs-ralative">

  <div id="sec01" class="col xs-col-12">
    <img class="col xs-col-12" src="../styles/images/pdp-1.jpg" />
  </div>

  <div id="sec02" class="col xs-col-12">
    <img class="col xs-col-12" src="../styles/images/5.jpg" />
  </div>

  <div id="sec03" class="col xs-col-12">
    <img class="col xs-col-12" src="../styles/images/4.jpg" />
  </div>

  <div id="sec04" class="col xs-col-12 ">
    <img class="col xs-col-12" src="../styles/images/7.jpg" />
  </div>
</div>

＆＃13;

Answer 1

好的，试试这段代码。您只需复制您忘记此课程的onclick选择器$('a.sec02')

＆＃13;

$(window).scroll(function() {
  redrawDotNav();
});

$('a.sec01').click(function() {
  $('html, body').animate({
    scrollTop: 0
  }, 1000, function() {});
  return false;
});
$('a.sec02').click(function() {
  $('html, body').animate({
    scrollTop: $('#sec02').offset().top
  }, 1000, function() {});
  return false;
});
$('a.sec03').click(function() {
  $('html, body').animate({
    scrollTop: $('#sec03').offset().top
  }, 1000, function() {});
  return false;
});
$('a.sec04').click(function() {
  $('html, body').animate({
    scrollTop: $('#sec04').offset().top
  }, 1000, function() {});
  return false;
});

function redrawDotNav() {
  var section1Top = 0;
  var section2Top = $('#sec02').offset().top - (($('#sec03').offset().top - $('#sec02').offset().top) / 2);
  var section3Top = $('#sec03').offset().top - (($('#sec04').offset().top - $('#sec03').offset().top) / 2);
  var section4Top = $('#sec04').offset().top - (($(document).height() - $('#sec04').offset().top) / 2);

  $('.sticky-indicators a').removeClass('active');


  if ($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top) {
    $('.sticky-indicators a.sec01').addClass('active');

  } else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top) {
    $('.sticky-indicators a.sec02').addClass('active');

  } else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top) {
    $('.sticky-indicators a.sec03').addClass('active');


  } else if ($(document).scrollTop() >= section4Top) {
    $('.sticky-indicators a.sec04').addClass('active');
  }

}

＆＃13;

img {
  height: 400px;
  width: 100%;
  float: left;
}
.col {
  float: left;
  width: 100%;
  border: 1px solid red;
}
.sticky-indicators {
  position: fixed;
  top: 0;
  right: 50px;
  background: white;
  width:200px;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav class="sticky-indicators">
  <ul>
    <li><a href="#sec01" class="sec01">Section 01</a>
    </li>
    <li><a href="#sec02" class="sec02">Section 02</a>
    </li>
    <li><a href="#sec03" class="sec03">Section 03</a>
    </li>
    <li><a href="#sec04" class="sec04">Section 04</a>
    </li>
  </ul>
</nav>
<div class="col xs-col-12 xs-ralative">

  <div id="sec01" class="col xs-col-12">
    <img class="col xs-col-12" src="../styles/images/pdp-1.jpg" />
  </div>

  <div id="sec02" class="col xs-col-12">
    <img class="col xs-col-12" src="../styles/images/5.jpg" />
  </div>

  <div id="sec03" class="col xs-col-12">
    <img class="col xs-col-12" src="../styles/images/4.jpg" />
  </div>

  <div id="sec04" class="col xs-col-12 ">
    <img class="col xs-col-12" src="../styles/images/7.jpg" />
  </div>
</div>

＆＃13;

jquery滚动到部分已损坏

1 个答案: