jQuery прокрутите страницу вверх и прокрутите страницу до следующего раздела.

Я пытаюсь реализовать позицию: фиксированная кнопка прокрутки до вершины и другая кнопка, которая прокручивает страницу по разделу. Я видел аналогичный код, который работает с идентификаторами, но я хотел бы использовать классы разделов и .next() .closest(), чтобы это сделать. Возможно ли это с помощью jQuery? прокрутки вверх и выделите второй раздел работы, но я не могу пройти мимо второй секции с .next() и .closest()jQuery прокрутите страницу вверх и прокрутите страницу до следующего раздела.

Это мой HTML:

<body> 
<a href="#0" class="cd-top">Top</a> 
<a href="#2" class="cd-next">next</a> 
<div class="section"> 
    <section class="x_section"> 1</section> 
    <section class="x_section"> 2</section> 
    <section class="x_section"> 3</section> 
    <section class="x_section"> 4</section> 
</div> 
</body>

и это Код JavaScript:

jQuery(document).ready(function($){ 
    $next = $('.cd-next'), 
    $back_to_top = $('.cd-top'); 
    //smooth scroll to top 
    $back_to_top.on('click', function(event){ 
     event.preventDefault(); 
     $('html,body').animate({ scrollTop: 0 }, 700); 
    }); 

    $next.on('click', function(event){ 
     event.preventDefault(); 
     if (typeof advance == 'undefined') { 
      var fuller = $('section').closest('.x_section').next(), 
       section = $('.x_section').closest('.x_section').next(), 
       top0 = section.scrollTop(), 
       advance = fuller.offset().top; 
     } 
     else { var advance = advance + fuller.offset().top; } 
     $('html,body').animate({ scrollTop: top0 + 408 }, 700); 
    }) ; 
});

Вот моя скрипка: https://jsfiddle.net/pnemeth/uLrjdm7e/

источник

2017-02-13 Peter Nemeth .malomsok.

Я использовал другой подход, чем вы U петь, однако, похоже, эта работа выполнена.

$(document).ready(function(){ 
 
    // declare section count, set to 0 
 
    var count = 0, 
 
    sections = $(".x_section"), 
 
    $next = $(".cd-next"), 
 
    $top = $(".cd-top"); 
 

 
    $next.on('click', function(event){ 
 
event.preventDefault(); 
 
// increment section count 
 
count++; 
 

 
$("html, body").animate({ 
 
     // scroll to section count 
 
     scrollTop: $(sections.get(count)).offset().top 
 
    }); 
 
    }); 
 
    
 
    $top.on('click', function(event) { 
 
     event.preventDefault(); 
 
     // reset section count to 0 
 
     count = 0; 
 
     $("html, body").animate({ 
 
     scrollTop: $(sections.get(0)).offset().top 
 
    }); 
 
    }); 
 
});

Обновление: Это решение технически соответствует вашим требованиям использования .closest() и .next(), но использует положение маркера, который прилагается к следующему разделу DIV после каждого нажатия кнопки , Когда пользователь нажимает кнопку, чтобы вернуться к началу, маркер добавляется к первому разделу div.

$(document).ready(function(){ 
 
    var $next = $(".cd-next"), 
 
    $top = $(".cd-top"); 
 

 
    $next.on('click', function(event){ 
 
event.preventDefault(); 
 
// get section closest to marker 
 
var section = $('#marker').closest('.x_section'), 
 
// get next section 
 
nextSection = section.next(); 
 
// remove marker 
 
section.find($('#marker')).remove(); 
 
// append new marker to next section 
 
$(section.next()).append('<div id="marker"></div>'); 
 

 
$("html, body").animate({ 
 
     scrollTop: $(nextSection).offset().top 
 
    }); 
 
    }); 
 
    
 
    $top.on('click', function(event) { 
 
     event.preventDefault(); 
 
     // append marker to first section 
 
     $(document).find($('#marker')).appendTo($('.x_section').get(0)); 
 
     
 
     $("html, body").animate({ 
 
      // scroll to first section 
 
     scrollTop: $($('.x_section').get(0)).offset().top 
 
    }); 
 
    }); 
 
});

источник

2017-02-14 00:37:48 Inkdot

Хм, я не понимал, .next и .closest были подходящими для вашего дизайна. Я извиняюсь. – Inkdot

Я считаю, что проблема заключается в том, что метод .closest() находит ближайший элемент в дереве DOM, а не в окне. Я думаю, что единственный способ обойти это без использования «тегов id» - это написать функцию для вычисления позиции окна по отношению к каждому элементу класса «x_position», увеличивая элемент, который вы сравниваете с положением окна каждый вы достигнете элемента с классом «x_position». Было бы намного проще, и использовать меньше кода для перехода по тегу 'id tag'. – Inkdot

Привет, Inkdot! Спасибо за решение! Вы правы, я начал это более сложным образом, чем это должно быть сделано. Ваше решение №1 отлично работает. # 2 также включает следующую() и ближайшую() то, что я считал хорошей идеей в начале, но теперь я за ваше первое решение. –

jQuery прокрутите страницу вверх и прокрутите страницу до следующего раздела.

ответ

Смежные вопросы