单击链接

Question

在将链接添加到html文件时遇到一些麻烦。我正在使用此Codepan，并且尝试添加一个链接，该链接应将我重定向到另一个div。不幸的是，单击链接后，我进入了div，但是进行了任何滚动移动，都将我带回到了上一个位置。有谁知道为什么它不能正常工作？

var page = document.getElementById('page');
var last_pane = page.getElementsByClassName('pane');
last_pane = last_pane[last_pane.length-1];
var dummy_x = null;

window.onscroll = function () {
  // Horizontal Scroll.
  var y = document.body.getBoundingClientRect().top;
  page.scrollLeft = -y;
  
  // Looping Scroll.
  var diff = window.scrollY - dummy_x;
  if (diff > 0) {
    window.scrollTo(0, diff);
  }
  else if (window.scrollY == 0) {
    window.scrollTo(0, dummy_x);
  }
}
// Adjust the body height if the window resizes.
window.onresize = resize;
// Initial resize.
resize();

// Reset window-based vars
function resize() {
  var w = page.scrollWidth-window.innerWidth+window.innerHeight;
  document.body.style.height = w + 'px';
  
  dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
}

body{
  overflow-x:hidden;
  color:#FFF;
  font-family:Helvetica;
  font-size:200%;
}
#page {
  overflow:hidden;
  white-space:nowrap;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#CCC;
  display:flex;
  flex-wrap:no-wrap;
}
.pane {
  flex:0 0 100vw;
  height:100vh;
  display:flex;
  position:relative;
  align-items:center;
  justify-content:center;
  background-color: #45CCFF;
}

.pane:nth-child(4n+2)  {
  background-color: #49E83E;
}
.pane:nth-child(4n+3)  {
  background-color: #EDDE05;
}
.pane:nth-child(4n+4)  {
  background-color: #E84B30;
}
.pane:last-child {
  background-color: #45CCFF;
}

<div id="page">
  <div class="pane"><div>Looping Horizontal Scroll</div></div>
  <div class="pane"><div>2</div></div>
  <div class="pane"><div>3</div></div>
  <div class="pane"><div>4</div></div>
  <div class="pane"><div>5</div></div>
  <div class="pane"><div>Last</div></div>
  <div class="pane"><div>Looping Horizontal Scroll</div></div>
</div>

https://codepen.io/anon/pen/OqzGJB

<div id="page">
  <div class="pane"><div>Looping Horizontal Scroll</div></div>
  <div class="pane"><div><a href="#test">hello</a></div></div>
  <div class="pane"><div>3</div></div>
  <div class="pane"><div>4</div></div>
  <div class="pane"><div id="test">5</div></div>
  <div class="pane"><div>Last</div></div>
  <div class="pane"><div>Looping Horizontal Scroll</div></div>
</div>

Answer 1

所以我终于有了JS的解决方案：

$('a[href*="#"]:not([href="#"])').click(event => {

  var el = $(event.target);
  var href = el.attr("href");
  var destEl = $(href).closest(".pane");
  var yPosition = destEl.offset().left + window.pageYOffset;

  console.log(yPosition, {window})
  window.scrollTo({top: yPosition,left: yPosition,behavior: 'smooth'});
  event.preventDefault();

  $(".pane").each((i, e) => {

    console.log($(e).offset().left);
  });
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');}
});