jQuery для одностраничного сайта, который автоматически прокручивается после нажатия кнопки воспроизведения

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

http://codepen.io/anon/pen/nlcsK

Вы также заметите, что в верхней части страницы есть кнопка "Воспроизвести" div, так как мне действительно хотелось бы, чтобы страница автоматически прокручивалась до разных якорей в разное время после того, как вы нажмите «Играть».

К сожалению, мой jQuery еще хуже, чем мой HTML/CSS, поэтому я понятия не имею, как это сделать! Любая (шаг за шагом) помощь будет высоко оценена!

<nav id="nav">
  <a href="#section-one">One</a>|
  <a href="#section-two">Two</a>|
  <a href="#section-three">Three</a>|
  <a href="#section-four">Four</a>
</nav>

<div id="section-one" class="cover">
  <h1 id="play">Play</h1>
</div>

<div id="section-two" class="cover">
</div>

<div id="section-three" class="cover">
</div>


* {
  margin:0px;
  padding:0px;
  height:100%;
}

#nav {
  position:fixed; 
}

#section-one { 
  background-color:white;
}

#section-two { 
  background-color:orange;
}

#section-three { 
  background-color:grey;
}

#section-four { 
  background-color:green;
}

.cover {
  background: no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

#play {
  width:60px;
  height:60px;
  background-color:red;
  margin: 0px auto;
}

html jquery css anchor singlepage
person user3147067    schedule 30.12.2013    source источник
comment
Как правило, лучше, если вы также скопируете соответствующий код в свой вопрос; это помогает вопросу оставаться актуальным, даже если ссылка прерывается позднее. Спасибо!   -  person StackExchange What The Heck    schedule 30.12.2013
comment
См. этот вопрос здесь: stackoverflow.com/questions/6677035/jquery-scroll -to-element Что вы можете сделать, так это использовать приведенный там пример и объединить его с функцией .delay() для определения времени прокрутки. api.jquery.com/delay   -  person Dryden Long    schedule 30.12.2013
comment
возможный дубликат Плавная прокрутка JavaScript/jQuery до элемента   -  person StackExchange What The Heck    schedule 30.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

Если вы добавите этот jQuery-код:

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Каждый раз, когда вы нажимаете якорную ссылку HTML, действие будет переопределено, и jquery будет прокручивать его.

Точно так же при создании анимации для кнопки воспроизведения. Вы должны получить позицию цели, затем вы можете перейти к ней:

$(document).ready(function() {
    $('.play').on('click', function() {
        $target = $(yourelement);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            window.location.hash = target;

            //do this for the next one
            $target = $(yourelement);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 1000, 'swing', function () {
                window.location.hash = target;
                //and probably for another one here
            });
        });
    }
});

где 1000 — это время, необходимое для прокрутки в миллисекундах, вы можете изменить это.

person vigonotion    schedule 30.12.2013