Одна кнопка для scrollTop(); хотя разделы на веб-странице

У меня есть веб-страница, которая разбита на разные разделы.

Я столкнулся с большим количеством помощи и руководств о том, как создать навигацию/боковую навигацию для анимации тела html для анимации и прокрутки до верхней части div после нажатия кнопки.

Чего я не нашел, так это способа объединить все функции в одну симпатичную компактную кнопку. (думаю стрелка)

html будет выглядеть примерно так

<div class="section" id="section-one">
</div>
<div class="section" id="section-two">
</div>
<div class="section" id="section-three">
</div>
<div class="section" id="section-four">
</div>
<div class="section" id="section-five">
</div>
<span class="arrow">&uarr;</span>

Css будет выглядеть примерно так

.section{
  height:800px;
  width:100%;
  display:block;
  position:relative;
}
.arrow{
  display:block;
  position:fixed;
  top:25px;
  right:25px;
  transition: opacity 0.5s, transform 1s;
  transform: rotate(180deg);
  -webkit-transition:opacity 0.5s, transform 1s;
  -webkit-transform:rotate(180deg);
}

.arrow.is-up{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

Я надеюсь, что смогу щелкнуть стрелку и перейти к каждому разделу один за другим. Затем, как только он окажется в последнем разделе section-five, я могу addClass('is-up');, который анимирует стрелку на 180 градусов и добавит новую функцию, которая будет прокручиваться до самого верха веб-страницы.


javascript jquery scrolltop jquery-animate
person Jargonaut_    schedule 15.09.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward 

// get the offset of your '.section' container
var bodyOffset = $('body').offset().top;

// listen for click events
$('.arrow').on('click', function(){

    // count sections and assume that current section is the first section
    var sectionCount = $('.section').length;
    var currentSection = 0;

    // iterate thru elements to determine what section you are in
    for(var i = 0; i < sectionCount; i++){
        var currentScrollPosition = $(document).scrollTop();
        var thisSectionOffset = $(".section").eq(i).offset().top - bodyOffset;
        if(currentScrollPosition >= thisSectionOffset){
            currentSection = i;
        }
    }

    // determine what the new section should be
    var newSection = (currentSection+1 > sectionCount-1) ? 0 : currentSection+1;

    // animate arrow
    if(newSection == sectionCount-1){
        $('.arrow').addClass('is-up')
    } else {
        $('.arrow').removeClass('is-up')        
    }

    // scroll to the new section
    $('html, body').animate({
        scrollTop: $(".section").eq(newSection).offset().top
    }, 400);

});

Вот скрипт, использующий фоновый градиент для демонстрации эффекта прокрутки: https://jsfiddle.net/yotaajop/ 1/

person wfaye    schedule 15.09.2015
comment
Спасибо за ответ, извините за задержку с ответом. Вы предоставили мне именно то, что я ищу, оцените также пояснения по всему коду. Спасибо - person Jargonaut_; 22.09.2015

arrow_upward
0
arrow_downward

https://jsfiddle.net/h4ja54uh/3/

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

$('.arrow').click(function() {
    $(document.body).animate({
        scrollTop: (function() {
            // Get the next section (top of section is below current scroll)
            var $next = $('.section').filter(function(i, e) {
                return $(document.body).scrollTop() < $(e).offset().top;
            });

            // Reset the arrow
            $('.arrow').removeClass('is-up');

            // See how many sections we have left
            switch ($next.length) {
                // We're past the last section, go to top.
                case 0:
                    return $('.section').first().offset().top;
                // Last section, flip that arrow!
                case 1:
                    $('.arrow').addClass('is-up');
                    // Falls through on purpose.
                    // We flip the arrow, but we still want to scroll.
                // Scroll to next section.
                default:
                    return $next.first().offset().top;
            }
        })()
    });
});

$(document.body).animate({
    scrollTop: $('.section').first().offset().top
});
person arcyqwerty    schedule 15.09.2015
comment
Спасибо за ответ, извините за задержку с ответом. Вы предоставили мне именно то, что я ищу, поскольку вы можете видеть, что есть два ответа на мой вопрос, есть ли большая разница между ответами, например, один лучше подходит, чем другой или? Еще раз спасибо за вашу помощь - person Jargonaut_; 22.09.2015

arrow_upward
0
arrow_downward

Если вы собираетесь использовать полноэкранные страницы, не рассматривали ли вы возможность использования моей библиотеки fullpage.js?

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

person Alvaro    schedule 17.09.2015