Как go перейти к различным разделам на одной странице и go с помощью кнопок? - PullRequest
Новая
       1

Как go перейти к различным разделам на одной странице и go с помощью кнопок?

0 голосов
/ 14 марта 2020

Я довольно новичок в javascript. Я застрял на этом коде. Я пытаюсь создать кнопку для навигации между верхней и нижней частью веб-страницы. Первоначально прокрутка вниз работает, но как только я нажимаю кнопку back to top , прокрутка вниз logi c прекращается. Я не могу понять, где я применяю неправильный лог c. Заранее спасибо

https://jsfiddle.net/riodahamster/9vtxh0aL/9/

var i = 1;
$(".scroll-top").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  window.icount = 0;
});



var icount = 0
$('.down-btn').on('click', function(e) {
  e.preventDefault();
  window.icount++;
  var offset = $("div.next-section").eq(icount).offset().top;
  $('html, body').stop().animate({
    scrollTop: offset
  }, 400);

});

Ответы [ 2 ]

0 голосов
/ 14 марта 2020

Вы можете прокрутить элемент, используя ваниль JavaScript. Просто следуйте трюкам.

scrollIntoView прокручивает страницу для просмотра элемента. Для этого здесь я создал два пустых элемента #top-view и #bottom-view вверху и внизу HTML соответственно.

После этого при нажатии на Go Bottom и Go Up затем вы попадете на элементы #bottom-view и #top-view. 

const bottomBtn = document.querySelector('#go-bottom');
const upBtn = document.querySelector('#go-up');
const topView = document.querySelector('#top-view');
const bottomView = document.querySelector('#bottom-view');

bottomBtn.addEventListener('click', (evt) => {
    evt.preventDefault();

    bottomView.scrollIntoView({behavior: 'smooth'});
});

upBtn.addEventListener('click', (evt) => {
    evt.preventDefault();

    topView.scrollIntoView({behavior: 'smooth'});
});
#page-1 {
    background: yellow;
    color: #222;
}

#page-2 {
    background: red;
    color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- empty element for scrolling into it -->
<div id="top-view"></div>
<button id="go-bottom">Go Bottom</button>
<section id="page-1">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
    </p>
</section>

<section id="page-2">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem esse cupiditate unde magni facilis, quod saepe ad eligendi tenetur voluptas ea maxime dolorem id explicabo incidunt tempora quae debitis soluta!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, voluptatum aspernatur aut explicabo dignissimos aperiam, ut exercitationem labore? Hic necessitatibus nostrum delectus suscipit nihil eveniet asperiores alias facere a quod.
    </p>
</section>
<button id="go-up">Go Up</button>

<!-- empty element for scrolling into it -->
<div id="bottom-view"></div>

    
</body>
</html>
0 голосов
/ 14 марта 2020

Код работает нормально. Проблема в том, что вы еще не добавили Jquery!

enter image description here

Также вам нужно настроить таргетинг на нижний элемент div, чтобы получить функцию down, чтобы переместить вас на нижний уровень. страницы. В этом случае, класс yello div! 

var i = 1;
$(".scroll-top").click(function() {
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  window.icount = 0;
});



var icount = 0
$('.down-btn').on('click', function(e) {
  e.preventDefault();
  window.icount++;
  var offset = $("div.next-section.yellow").eq(icount).offset().top;
  $('html, body').stop().animate({
    scrollTop: offset
  }, 400);

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...