Scroll mydiv up to active link if active link is overflowing

Question

i want to make auto-scroll for my right side navigation section. currently when i scroll left-side slides then my right-side navigation should scroll if scroll down slides, i want to auto-scroll that navigation so user can see on which tab they have paused, currently active tabs working fine according to numbers but after overflow user not able to see active tab. user need to scroll right side manually.

Example code to check 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

i tried j-query for same but looking for simple solution.

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

solution found https://codepen.io/tushgraph/pen/omZQoE – tushgraph Feb 05 '19 at 10:17 — tushgraph, Feb 05 '19 at 10:17

score 1 · Answer 1 · answered Feb 04 '19 at 11:10

1

Try adding

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

at the end of scroll function after you add act class to the anchor.

answered Feb 04 '19 at 11:10

CodeThing

2,580
2
12
25

.right-bar is jumping if i scroll contentiously up and down – tushgraph Feb 04 '19 at 11:53
@tushgraph Yes, this is because `scroll` function gets call on each scroll you make. The workaround is you have to add some kind condition around above statement. so that it execute only once. – CodeThing Feb 04 '19 at 12:03
@tushgraph You can also check if element if in the viewport. and execute above statement only if element is not visible in viewport. Ref: https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport – CodeThing Feb 04 '19 at 12:10
Thanks working close to what i expect but tried this new code https://codepen.io/tushgraph/pen/omZQoE code: var viewportheight = $('.right-bar').height(); var licount = $(".right-bar li").length; $('.right-bar').animate({scrollTop: scrollpos / licount}, 0); – tushgraph Feb 05 '19 at 10:08

score 0 · Answer 2 · answered Feb 04 '19 at 11:19

Please add animation scroll top like this:

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

thanks i tried it, but scroll should work for up and down not smooth in this case — tushgraph, Feb 04 '19 at 11:51
Thanks working close to what i expect but tried this new code https://codepen.io/tushgraph/pen/omZQoE code: var viewportheight = $('.right-bar').height(); var licount = $(".right-bar li").length; $('.right-bar').animate({scrollTop: scrollpos / licount}, 0); — tushgraph, Feb 05 '19 at 10:15

Scroll mydiv up to active link if active link is overflowing

2 Answers2