Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрол по кликам (https://javascript.ru/forum/dom-window/44942-skrol-po-klikam.html)

utb 07.02.2014 14:35

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

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

tilperion 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 07.02.2014 19:49

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

utb 11.02.2014 09:10

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

рони 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>

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


Часовой пояс GMT +3, время: 09:50.