Прокрутите страницу до div, не дожидайте второго щелчка

Question

Я стараюсь сделать следующее. Я создал эту скрипку, чтобы показать, что я пытаюсь достичь:

https://jsfiddle.net/c4xcb98w/1/

Если пользователь нажимает на ссылку интерактивного элемента «Нажмите 6», он должен прокручиваться к элементу в сНу .Location-обертке. Это работает, но я не понимаю, что он прокручивается назад, если снова щелкните по той же ссылке.

Кроме того, если я нажал на click6 и прокручивается вниз, а затем я нажимаю на «click8» она прокручивается снова, но не Див номер 8.

Знает ли кто, как я могу добиться того, что если у него есть прокручивается, и я нажимаю тот же триггер снова, он ничего не должен делать, и если щелкнуть еще один триггер, он должен прокрутиться до этого div?

$('.click_6').click(function(e) { 
 
    $('.location-wrapper').animate({ 
 
    scrollTop: ($("#box_6").offset().top) 
 
    }, 'slow'); 
 
}); 
 

 
$('.click_8').click(function(e) { 
 
    $('.location-wrapper').animate({ 
 
    scrollTop: ($("#box_8").offset().top) 
 
    }, 'slow'); 
 
});

#map { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #000; 
 
} 
 
.location-wrapper { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 0px; 
 
    height: 800px; 
 
    overflow-y: scroll; 
 
} 
 
.location-box { 
 
    background-color: #fff; 
 
    width: 315px; 
 
    height: 300px; 
 
    margin: 0 0 20px 0; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="click_6">click6</div> 
 
<div class="click_8">click8</div> 
 
<div id="map"> 
 
</div> 
 

 
<div class="location-wrapper"> 
 
    <div class="location-box" id="box_1">#1</div> 
 
    <div class="location-box" id="box_2">#2</div> 
 
    <div class="location-box" id="box_3">#3</div> 
 
    <div class="location-box" id="box_4">#4</div> 
 
    <div class="location-box" id="box_5">#5</div> 
 
    <div class="location-box" id="box_6">#6</div> 
 
    <div class="location-box" id="box_7">#7</div> 
 
    <div class="location-box" id="box_8">#8</div> 
 
    <div class="location-box" id="box_9">#9</div> 
 
    <div class="location-box" id="box_10">#10</div> 
 
    <div class="location-box" id="box_11">#11</div> 
 
    <div class="location-box" id="box_12">#12</div> 
 
    <div class="location-box" id="box_13">#13</div> 
 
    <div class="location-box" id="box_14">#14</div> 
 
    <div class="location-box" id="box_15">#15</div> 
 
</div>

Спасибо за любую помощь!

Answer 1

.offset() дает вам координаты относительно document, поэтому вы должны учитывать значение scrollTop значения обертки.

Следующий код не является оптимальным, но это даст вам хорошее направление:

jsFiddle

$('.click_6').click(function(e) { 
       $('.location-wrapper').animate({ 
        scrollTop: ($("#box_6").offset().top + 
           $("#box_6").offsetParent().scrollTop())}, 
        'slow'); 
}); 

$('.click_8').click(function(e) { 
       $('.location-wrapper').animate({ 
        scrollTop: ($("#box_8").offset().top + 
           $("#box_8").offsetParent().scrollTop())}, 
        'slow'); 
}); 

---

BTW, .position() является более подходящим, когда вам нужны координаты относительно верхняя часть родителя (обертка).

Так что этот код, вероятно, лучше:

$('.click_6').click(function(e) { 
       $('.location-wrapper').animate({ 
        scrollTop: ($("#box_6").poition().top + 
           $("#box_6").offsetParent().scrollTop())}, 
        'slow'); 
}); 

Answer 2

ив отредактировали код. https://jsfiddle.net/c4xcb98w/4/ вот рабочая демонстрация.

var box6 = $("#box_6").offset().top; 
var box8 = $("#box_8").offset().top; 
$('.click_6').click(function(e) { 
       $('.location-wrapper').stop().animate({ 
        scrollTop: box6}, 
        'slow'); 
}); 

$('.click_8').click(function(e) { 
       $('.location-wrapper').stop().animate({ 
        scrollTop: box8}, 
        'slow'); 
}); 

я думаю, что он не может получить location_box offset.top на инициализацию