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

时间：2019-02-04 10:48:50

标签： jquery html css

我想对我的右侧导航部分进行自动滚动。 当前，当我滚动左侧幻灯片时，如果向下滚动幻灯片，则我的右侧导航应该滚动，我想自动滚动该导航，以便用户可以看到他们暂停了哪个标签，当前处于活动状态的标签可以正常工作，但根据数字溢出用户无法看到活动标签。用户需要手动滚动右侧。

要检查的示例代码 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查询，但正在寻找简单的解决方案。 

/*********|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>

2 个答案:

答案 0 :(得分：1)

尝试添加

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

在将act类添加到锚点之后，

在滚动功能的末尾。

答案 1 :(得分：0)

请像这样添加动画滚动顶部：

/*********|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>

相关问题
最新问题