Question

我有div使用overflow:hidden并且在其他几个div容器中。我试图通过jQuery使用平滑滚动来滚动到div内的内部链接。这是我的代码，我在其他项目中使用了这些代码，效果很好：

＆＃13;

$(function() {
	  $('a[href*=#]:not([href=#])').click(function() {
	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

	      var target = $(this.hash);
	      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	      if (target.length) {
	        $('#cardb').animate({
                scrollTop: target.offset(
                ).top
	        }, 0500);
	        return false;
	      }
	    }
	  });
	});

＆＃13;

.slide {
  position: relative;
  padding: 2vh 3vw;
  min-height: 80vh;
  width: 100vw;
}
#slide4 {
    background: #ddd;
    width: 100vw;
    z-index: 1;
    padding: 2.5vw;
}
#carda, #cardb {
    width: 40vw;
    height: 60vh;
    padding: 3vw;
    background: #fff;
    opacity: 0.8;
    float: left;
}
#cardb {
    float: right;
    overflow: hidden;
}
#cardb-1, #cardb-2, #cardb-3, #cardb-4 {
    position: relative;
    height: 60vh;
}
#linkcontainer {
    position: absolute;
    bottom: 20vh;
}
.linkcircle {
    height: 3vh;
    width: 3vh;
    margin: 1vh;
    background: #999;
    opacity: 0.5;
    transition: 0.35s;
    border-radius: 1.5vh;
}
.linkcircle:hover {
    opacity: 0.9;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide4" class="slide">
  <div id="carda">
    <p>CARD A</p>
  </div>
          <div id="cardb">
                <div id="cardb-1">
                    <p>CARD B 1</p>
                </div>
                <div id="cardb-2">
                    <p>CARD B 2</p>
                </div>
                <div id="cardb-3">
                    <p>CARD B 3</p>
                </div>
                <div id="cardb-4">
                    <p>CARD B 4</p>
                </div>
              
              <div id="linkcontainer">
                  <a href="#cardb-1"><div class="linkcircle"></div></a>
                  <a href="#cardb-2"><div class="linkcircle"></div></a>
                  <a href="#cardb-3"><div class="linkcircle"></div></a>
                  <a href="#cardb-4"><div class="linkcircle"></div></a>
              </div>
  </div>
</div>

＆＃13;

我对结果感到困惑 - 链接几乎从不滚动到正确的目标，并且点击两次相同的链接仍然滚动（例如当你在#cardb-1时再点击#cardb-1的链接，div在其他地方滚动）。我是jQuery的新手，但我已尽可能多地研究，没有任何改进。我怀疑它可能实际上是一个CSS问题，但我也不确定我在哪里出错了。当我停用jQuery时，链接在预期位置正常。

Answer 1

我希望解决这个问题，我已经把你的代码作为一个开始，所以谢谢。

为了解决在点击相同链接时再次发生滚动的问题，我在函数的开头包含了这段代码：

if( location.hash == this.hash){ return false;}

虽然，似乎需要1到2秒的时间来处理新的哈希，所以如果你在同一个链接上点击两次这个时间流逝，问题仍然存在，但如果你在那段时间后点击没有任何反应。我仍在试图弄清楚我是否可以消除1-2秒的清新失效，但至少它是一个开始。

Answer 2

这是一些可以滚动到正确位置的工作代码。诀窍是动画函数采用绝对y，原始代码只占顶部，不包括边距，并且还有另外100px（在我的页面中），我不确定它在哪里＆＃39;来自。因此，我只是遍历所有div，直到找到所需的div，并计算其沿途的位置。这也可以解决您在两个链接上快速单击时的行为。

     $(function() {
        $('a[href^="#"]').click(function() {
            if( location.hash == this.hash){ return false;}
            var target = $(this.hash);

            var targetId = this.hash.substr(1);
            var toGo = 0;

            // class of each div that has an id for anchor link.
            $('.info-box').each(function() {
                var box = $(this);

                if( this.id == targetId){
                    toGo += box.outerHeight(true)-box.outerHeight();
                    return false;
                }
                toGo += box.outerHeight(true)-box.outerHeight();
                toGo += box.outerHeight();
            });

            if (target.length) {
                // id of the container div  
                $('#page').animate({scrollTop: toGo}, 700);
                return false;
            }
        });
     });

平滑滚动到div内部链接的行为奇怪;可能是CSS大小/间距问题

2 个答案: