jQuery прокрутить вверх

Question

jQuery прокрутить вверх

0

Согласно этому сообщению, я спросил, как сделать метод прокрутки, который показывает элемент, прокручивает к нему и скрывает элемент, из которого я пришел.

Я улучшил этот код, и он работает.

Но когда я пытаюсь сделать это назад, так что со второго экрана на первый экран снова. Это не работает. Его единственная прокрутка вверху экрана #content...

Как это происходит?

Здесь jsFiddle:

Bas 14 май 2014, в 18:05

Источник

0

Вы скрываете элемент, который прокручивали, от размещения элемента, к которому вы прокручивали, в верхней части документа.
Patsy Issa 15 май 2014, в 07:21

Теги:

javascript

jquery

html

css

2 ответа

0

поместите это в clck-обработчик кнопки back to top: $ ('html'). scrollTop (0);

patrick 14 май 2014, в 13:50

0

Вы можете быть более конкретным?
Bas 14 май 2014, в 18:47

Ещё вопросы

Вы скрываете элемент, который прокручивали, от размещения элемента, к которому вы прокручивали, в верхней части документа.

Patsy Issa · Accepted Answer · 2014-05-15T06-32-00.000Z

Чтобы добиться желаемого эффекта, вам нужно немного изменить свою разметку /css и js логику, поскольку теперь вы скрываете верхний элемент, поэтому, когда прокрутка выполнена, нижний элемент offset top = 0.

Первое изменение заключается в том, чтобы обернуть ваш html в <div> мы предоставим div id id #container. Во-вторых, нам нужно установить абсолютное положение контейнера, чтобы мы могли перемещать его вверх и вниз при нажатии кнопки.

Css:

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
}
#page1 {
    height: 100%;
    width: 100%;
}
#content {
    height: 100%;
    width: 100%;
    overflow-y:scroll;
}
#exploreBtn {
    height: 50px;
    width: 50px;
    background-color: red;
}
#goBack {
    position: fixed;
    bottom: 5%;
    right: 5%;
    height: 50px;
    width: 50px;
    background-color: purple;
}
#container {
    position:absolute;
    width:100%;
    height:100%;
}

И, наконец, нам нужно изменить js:

$(document).ready(function () {
    $('#exploreBtn').on('click', function () {
        showScrollHide('#content', '#page1');
    });

    $('#goBack').on('click', function () {
        showScrollHide('#page1', '#content');
    });
});

function showScrollHide(element, hide) {
    var _ele = $(element),
        _container = $('#container'),
        _ele_top = _ele.offset().top;
    if(_ele_top < 0)
        _ele_top = 0;
    console.log(_ele_top);
    _ele.fadeIn(500, function () {
        _container.stop().animate({
            top: - _ele_top
        }, 1000);
    });
}

Мы получаем желаемый эффект, нуждаемся в некоторой настройке, но вы получаете общую картину. Надеюсь, я помог. Скрипка

это действительно работает, но теперь, когда я изменяю размер окна, он делает что-то странное. Когда я делаю его меньше, зеленый div становится намного меньше, с пустым пространством внизу, а когда я делаю его больше, первый div снова показывается.
в итоге сработало. благодарю вас :)