04.07.2021, 02:05
|
Интересующийся
|
|
Регистрация: 21.05.2018
Сообщений: 25
|
|
Как написать скрипт, чтобы при нажатии на кнопку он скроллил на следующую или предыду
Как сделать так, чтобы при нажатии на стрелку вверх происходил переход на секцию вверх, а при нажатии на стрелку вниз переход на следующую секцию вниз? Я попробовал написать код для стрелки вверх, но у меня не пролистывается на следующую секцию, а сразу уходит на самый вверх.
Сам сайт http://ct03638.tmweb.ru/
Весь код https://jsfiddle.net/sojq3hm0/
<nav class="navbar">
<ul>
<li>
<a href="#"><i class="far fa-arrow-alt-circle-up"></i></a>
</li>
<li>
<a href="#main" class="dot active" data-scroll="main">
<span>Главная</span>
</a>
</li>
<li>
<a href="#about_us" class="dot" data-scroll="about_us">
<span>О нас</span>
</a>
</li>
<li>
<a href="#services" class="dot" data-scroll="services">
<span>Услуги</span>
</a>
</li>
<li>
<a href="#sequence" class="dot" data-scroll="sequence">
<span>Порядок работы</span>
</a>
</li>
<li>
<a href="#stages" class="dot" data-scroll="stages">
<span>Этапы работы</span>
</a>
</li>
<li>
<a href="#portfolio" class="dot" data-scroll="portfolio">
<span>Портфолио</span>
</a>
</li>
<li>
<a href="#news" class="dot" data-scroll="news">
<span>Новости</span>
</a>
</li>
<li>
<a href="#contacts" class="dot" data-scroll="contacts">
<span>Контакты</span>
</a>
</li>
<li>
<a href="#"><i class="far fa-arrow-alt-circle-down"></i></a>
</li>
</ul>
</nav>
$(".fa-arrow-alt-circle-up").click(function(e) {
e.preventDefault();
$('html,body').animate({ scrollTop: 0 }, 'slow');
});
|
|
04.07.2021, 07:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Сообщение от Tempest
|
но у меня не пролистывается на следующую секцию,
|
находим все кнопки, находим текущую, находим следущую, нажимаем, всё!!!
|
|
04.07.2021, 10:45
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Tempest, а плагины использовать нельзя? Например.
|
|
04.07.2021, 12:52
|
Интересующийся
|
|
Регистрация: 21.05.2018
Сообщений: 25
|
|
Да это понятно, но я не понимаю как именно код написать, я только только начал все это изучать
|
|
04.07.2021, 13:14
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Tempest, так код посмотри у него, лишнее удали, перепиши, если изучать хочешь.
Последний раз редактировалось Rise, 04.07.2021 в 13:19.
|
|
04.07.2021, 13:19
|
Интересующийся
|
|
Регистрация: 21.05.2018
Сообщений: 25
|
|
в документации разберусь, но мне все равно придется писать код для стрелок, а в плагине такого нет
|
|
04.07.2021, 18:13
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Сообщение от Tempest
|
мне все равно придется писать код для стрелок
|
И что много кода писать?
.fp-arrow-prev,
.fp-arrow-next {
width: 30px;
height: 30px;
margin: 15px 0 15px -3px;
font-size: 22px;
color: gray;
text-align: center;
cursor: pointer;
border: 2px solid gray;
border-radius: 50%;
}
$('#fp-nav')
.prepend($('<div class="fp-arrow-prev">↑</div>').on('click', function() { fullpage_api.moveSectionUp() }))
.append($('<div class="fp-arrow-next">↓</div>').on('click', function() { fullpage_api.moveSectionDown() }));
|
|
04.07.2021, 20:46
|
Интересующийся
|
|
Регистрация: 21.05.2018
Сообщений: 25
|
|
Сообщение от Rise
|
И что много кода писать?
.fp-arrow-prev,
.fp-arrow-next {
width: 30px;
height: 30px;
margin: 15px 0 15px -3px;
font-size: 22px;
color: gray;
text-align: center;
cursor: pointer;
border: 2px solid gray;
border-radius: 50%;
}
$('#fp-nav')
.prepend($('<div class="fp-arrow-prev">↑</div>').on('click', function() { fullpage_api.moveSectionUp() }))
.append($('<div class="fp-arrow-next">↓</div>').on('click', function() { fullpage_api.moveSectionDown() }));
|
А можешь написать, как это осуществить на стрелках, которые у меня уже есть?
|
|
05.07.2021, 02:01
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Tempest, ну вставь иконку вместо спецсимвола, лол:
<i class="far fa-arrow-alt-circle-up"></i> вместо ↑
<i class="far fa-arrow-alt-circle-down"></i> вместо ↓
|
|
|
|