Nano Hash - криптовалюты, майнинг, программирование

Прокручивайте высоту области просмотра до конца непрерывно

У меня есть этот код для прокрутки высоты области просмотра по секциям при нажатии на фиксированную кнопку, пока не будет достигнут конец. Затем я хочу, чтобы кнопка исчезла.

HTML

<a class="cd-go">
        <img class="scroll-swipe" src="<?php bloginfo('template_directory'); ?>/img/scroll_down_arrow.svg">
</a><!-- scroll btn -->

JS:

$(document).on('click', '.cd-go', function(event){                        
    event.preventDefault();
    var viewportHeight = $(window).height();

    $('html, body').animate({
        scrollTop: viewportHeight,
        complete: function () {
           $('.cd-go').fadeOut(300);
        }
    }, 500);
});

Проблема в том, что это только прокрутка от первого до второго раздела. Как это могло быть раздел за разделом до дна?

РЕДАКТИРОВАТЬ: Вот скрипка: http://jsfiddle.net/cyt57dsj/7/

javascript scroll jquery css
18.06.2018

Ответы:


1

Вы можете отслеживать текущий раздел и умножать viewportHeight на текущий раздел. Таким образом, вы можете прокручивать раздел за разделом.

var currentSection = 0;
var totalSections = document.querySelectorAll("section").length;
$(document).on('click', '.cd-go', function(event){                        
    event.preventDefault();
    var viewportHeight = $(window).height();
    currentSection++;
    if (currentSection > totalSections - 1) currentSection = totalSections - 1;
    $('html, body').animate({
        scrollTop: viewportHeight * currentSection,
        complete: function () {
           $('.cd-swipe').slideDown(300);
        }
    }, 500);
});
.cd-go {
  	width: 209px;
    background: rgba(0,0,0, 0.17);
    height: 212px;
    border-radius: 212px;
    color: #fff;
    position: fixed;
    bottom: -106px;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.w-sec {
  height:100vh;
}
.w-sec:first-of-type {
  background:#fff;
}
.w-sec:nth-of-type(2) {
  background:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cd-go">
			DOWN
</a><!-- scroll btn -->

<section id="section1" class="w-sec cd-section">
	content
</section><!-- section 2 -->

<section id="section2" class="w-sec cd-section">
	content
</section><!-- section 2 -->

<section id="section3" class="w-sec cd-section">
	content
</section><!-- section 2 -->

18.06.2018
  • Спасибо. Не могли бы вы посоветовать фрагмент для сброса разделов, когда пользователь прокручивает резервную копию? 18.06.2018

    • 2

    просто поместите $(document).height() вместо $(window).height() :)

    18.06.2018
  • Кажется, что это прокручивается прямо вниз, а не по разделам вниз. 18.06.2018
  • Owww я думал, что вы просто хотите достичь дна. 18.06.2018

    • 3

    Попробуй это,

    $(document).on('click', '.cd-go', function(event){                        
event.preventDefault();
var viewportHeight = $(document).height();
$("html, body").animate({
     scrollTop: viewportHeight,
  }, {
    duration: 500,
    complete: function () {
       $('.cd-swipe').slideDown(300);
    }
  });
});

    вы прокручиваете окно вместо документа

    18.06.2018
  • Кажется, что это прокручивается прямо вниз, а не по разделам вниз. 18.06.2018
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..