如果活动链接溢出，向上滚动mydiv到活动链接

Question

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

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

检查当前工作屏幕截图代码，但当我接近第10张幻灯片时，右侧导航没有自动滚动

我尝试了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类添加到锚点之后，在滚动功能的末尾。

Answer 2

请添加动画滚动顶部，如下所示：

/*********|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 numberscroll = $('.right-bar li');
console.log = numberscroll
		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');
$('.right-bar')
.animate({scrollTop: $('.right-bar li a').eq(i).offset().top - 20 }, 400);
				}
		});








}).scroll();

body{ display:block; transition:0.3s; background-color:#000; 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;
}
.holder img{width:31%}
.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>