0

Здравствуйте, есть такой код:

function search(){
    var searchString = $('#search').val();
    var element = $('#viewer div:contains("'+searchString+'")');
    
    $('#viewer').animate({
            scrollTop: $(element).offset().top - 30
        }, 2000); 
}
#viewer{
    max-height: 200px;
    position: absolute;
    overflow-y: auto;
}
.search2{
    margin-top: 1000px;
}
.search1{
    margin-top: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search"><button onclick="search()">заскролить</button>
<div id="viewer">
    <div><p>roll</p></div>
    <div class="search1"><p>test1</p></div>
    <div class="search2"><p>test2</p></div>
</div>

Почему при втором нажатии с такой же введенной строкой оно скролит вверх? и ещё если проскролить к test1 а потом к test2 то оно останавливается на половине пути

1 ответ 1

1

Отличный пример. Очень занимательный. Позицию нужно считать с учётом скрола

function search(){
    var searchString = $('#search').val();
    var element = $('#viewer div:contains("'+searchString+'")');
    if(element.size()){
    $('#viewer').animate({
            scrollTop: $(element).offset().top + $('#viewer').scrollTop() - 30
        }, 2000); 
     }
}
#viewer{
    max-height: 200px;
    position: absolute;
    overflow-y: auto;
}
.search2{
    margin-top: 1000px;
}
.search1{
    margin-top: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search"><button onclick="search()">заскролить</button>
<div id="viewer">
    <div><p>roll</p></div>
    <div class="search1"><p>test1</p></div>
    <div class="search2"><p>test2</p></div>
</div>

1
  • точно боже мой совсем забыл что оно от экрана считает) 10 авг 2017 в 8:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.