jQuery - Как заставить окно браузера прокручиваться по горизонтали при нажатии на div?

#javascript #jquery #html #css #scroll

#javascript #jquery #HTML #css #прокрутка

Вопрос:

У меня есть изображение стрелки в div. Этот div закреплен в правом нижнем углу очень широкой страницы.

Как я могу использовать jQuery для прокрутки окна вправо на 600 пикселей при каждом нажатии на div? (И возможно ли определить, когда страница больше не может прокручиваться вправо, и скрыть стрелку?)

Приветствия.

Ответ №1:

Попробуйте что-то вроде этого:

 var distance = 600;
$("div").click(function() {
    $("html:not(:animated), body:not(:animated)").animate(
        {scrollLeft: " =" distance}, 400
    );
});

jsfiddle здесь: http://jsfiddle.net/juXLu/2

[править] И здесь определяется, находитесь ли вы в конце документа http://jsfiddle.net/lukemartin/juXLu/5

 var distance = 600,
    docWidth = $(document).width(),
    scrollPos;

// click handler
$("div").click(function() {

    // animate 
    $("html:not(:animated), body:not(:animated)").animate(
        // amount to scroll
        {scrollLeft: " ="   distance},
        // scroll speed (ms)
        400,
        // callback function
        function(){
            // check our scroll position
            scrollPos = $(window).width()   $(window).scrollLeft(); 
            // if it equals the doc width, we're at the end
            if(docWidth === scrollPos) {
                $("div").text("End of the line");
            }
        }
    );    

});

Ответ №2:

Используйте метод jquery scrollLeft

 $(document).ready(function(){
    $(window).scrollLeft((Number($(window).scrollLeft()) 600) 'px');
});

Что-то вроде этого 🙂

Ответ №3:

Вы могли бы использовать плагин Scrollto,

http://plugins.jquery.com/project/ScrollTo

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