Форум

utb · #1 (**permalink**) 07.02.2014, 14:35

Здравствуйте,
У меня такой вопрос: необходимо сделать прокрутку текста в контейнере, которая работает по клику кнопки, как делаю обычно такое?

есть пару мыслей, только до конца не могу понять технологию изменения позиции ползунка относительно текста. Пропорционально сдвигать, или по формуле какой

tilperion · #2 (**permalink**) 07.02.2014, 17:46

(function ($) {
    $(document).ready(function () {
        (function() {
            document.getElementById('text_block').onclick = function () {
                this.style.overflow = 'scroll';
                var top = 0; // счетчик прокрутки
                //функция прокрутки
                function scroll() {
                    top++;
                    setTimeout(function () {$('#text_block').scrollTop(top);}, 200);
                }
                function call() {
                    var timer = setInterval(scroll, 300);
                    if(top == 400) {
                        clearInterval(timer);
                    }
                    
                }
                call();
            };
        })();
    });
})(jQuery);

Что-то вроде такого.

Vlasenko Fedor · #3 (**permalink**) 07.02.2014, 19:49

Якорная прокрутка
Кнопка наверх

utb · #4 (**permalink**) 11.02.2014, 09:10

Ребят вы наверное меня немного не поняли

я скорее всего не правильно объяснил.
Но все равно спс, уже справился)

рони · #5 (**permalink**) 12.02.2014, 03:17

Сообщение от utb

сделать прокрутку текста в контейнере, которая работает по клику кнопки, как делаю обычно такое?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div style="width:200px; overflow: hidden; white-space:nowrap; border: #FF0000 1px solid" id="test">

		100AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<img src="http://javascript.ru/forum/images/smilies/victory.gif" alt="">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA200

</div>
<input id="l" name="" type="button" value="<-0">

<script>
       n = 0;
       $('#l').mousedown(function(){
       n = ++n > 100 ? 100 : n ;
       this.value = '<-'+n
       $("#test").scrollLeft(($('#test')[0].scrollWidth - $('#test').width())*n/100)
});
</script>
</body>
</html>

можно добавить таймер чтоб само двигалось пока нажал.

Форум

Справочник

Discord чат

Курсы javascript