jquery - 如果事件链接溢出，则将 mydiv 向上滚动到事件链接

Question

我想为我的右侧导航部分设置自动滚动。目前，当我滚动左侧幻灯片时，如果向下滚动幻灯片，我的右侧导航应该滚动，我想自动滚动该导航，以便用户可以看到他们在哪个选项卡上暂停了，当前事件的选项卡根据数字工作正常但之后溢出用户无法看到事件选项卡。用户需要手动滚动右侧。

要检查的示例代码 https://codepen.io/tushgraph/pen/omZQoE

check current working screen shot code but no auto-scroll for right side navigation when i am close to 10th slide

我尝试了同样的 j-query 但寻找简单的解决方案。

/*********|on click scroll|************/
$('.right-bar li').on('click', 'a[href^="#"]', function(e) {
  
    // target element id
    var id = $(this).attr('href');
  
    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }
  
    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();
    
    // top position relative to the document
    var pos = $id.offset().top;
    // animated top scrolling
	$('body, html').animate({scrollTop: pos}, 900);
});

$(document).ready(
    function() {
      var bh = $('.right-bar').height();
			$('.holder').height(bh - 20);
    });

$(window).scroll(function() {
		var scrollpos = $(window).scrollTop();
		// Assign active class to nav links while scolling
		$('.holder').each(function(i) {
				if ($(this).position().top <= scrollpos + 60) {
						$('.right-bar li a.act').removeClass('act');
						$('.right-bar li a').eq(i).addClass('act');
				}
		});
}).scroll();

body{
  display:block;
  transition:0.3s;
  background-color:#000;
  padding:0px; margin:0px; }

.holder{
  width:70%;
  background-color:#333;
  position:static; 
  padding:20px;
  color:#fff;
  border:5px #000 solid;
  font-family:helvetica;
  overflow:scroll;
  padding-right:100px;
}

.right-bar{
  position:fixed;
  list-style:none;
  right:0px;
  bottom:0px;
  width:25%;
  background-color:#222;
  top:0px;
  border:5px #000 solid;
  padding:10px;
  overflow:scroll;
  margin:0px;
  font-family:helvetica;
}

.right-bar a{
  display:block;
  padding:15px;
  border-bottom:1px #111 dashed;
  color:#fff;
  text-decoration:none;
}

.act{ background-color:#fa6b2e; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="right-bar">
    <li><a href="#1" class="act">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
    <li><a href="#6">6</a></li>
    <li><a href="#7">7</a></li>
    <li><a href="#8">8</a></li>
    <li><a href="#9">9</a></li>
    <li><a href="#10">10</a></li>
    <li><a href="#11">11</a></li>
    <li><a href="#12">12</a></li>
    <li><a href="#13">13</a></li>
    <li><a href="#14">14</a></li>
    <li><a href="#15">15</a></li>
    <li><a href="#16">16</a></li>
    <li><a href="#17">17</a></li>
    <li><a href="#18">18</a></li>
    <li><a href="#19">19</a></li>
    <li><a href="#20">20</a></li>
</ul>
    <div class="holder" id="1">1</div>
    <div class="holder" id="2">2</div>
    <div class="holder" id="3">3</div>
    <div class="holder" id="4">4</div>
    <div class="holder" id="5">5</div>
    <div class="holder" id="6">6</div>
    <div class="holder" id="7">7</div>
    <div class="holder" id="8">8</div>
    <div class="holder" id="9">9</div>
    <div class="holder" id="10">10</div>
    <div class="holder" id="11">11</div>
    <div class="holder" id="12">12</div>
    <div class="holder" id="13">13</div>
    <div class="holder" id="14">14</div>
    <div class="holder" id="15">15</div>
    <div class="holder" id="16">16</div>
    <div class="holder" id="17">17</div>
    <div class="holder" id="18">18</div>
    <div class="holder" id="19">19</div>
    <div class="holder" id="20">20</div>

Answer 1

尝试添加

$('.right-bar').animate({scrollTop: $('.right-bar li a').eq(i).position().top}, 100);

在将 act 类添加到 anchor 之后滚动函数的末尾。