Переход по якорям на сайте одной кнопкой.
Всем доброго дня!
Подскажите пожалуйста, как можно реализовать кнопку, при нажатии на которую будет производиться последовательный переход по якорям на странице? Т.е. у меня имеется на странице 6 якорей. <section id="link_1"></section> <section id="link_2"></section> <section id="link_3"></section> <section id="link_4"></section> <section id="link_5"></section> <section id="link_6"></section> И есть две кнопки - вверх и вниз <div class="arrow_top"></div> <div class="arrow_bottom"></div> При нажатии на <div class="arrow_bottom"></div> смещение должно происходить последовательно по якорям вниз, т.е. сначала на link_1, потом на link_2 и т.д. Следовательно при нажатии на <div class="arrow_top"></div> обратное действие. Буду очень благодарен за помощь! P.S. Вариант с шестью отдельными кнопками не подходит, нужно именно две - вверх и вниз. Заранее спасибо! |
Цитата:
Нажимая твои кнопки, можно переходить к следующему или предыдущему section и "переставлять" тот класс "текущему" section. |
Цитата:
|
Цитата:
А там может и желающие показать что-то на нем появятся... |
Цитата:
|
malefikus13, т.е. тестовый пример делать не станешь... :D
|
Цитата:
|
Решил вчера написать это дело. Мне помогают , почему бы и мне не помочь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 100%;
line-height: 1.4;
}
body {
font-family: 'Roboto', Verdana, sans-serif;
color: #fff;
}
.way section {
display: block;
width: 100%;
height: 100vh;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.naver {
width: 100%;
position: fixed;
top: 10px;
left: 0;
}
.naver ul {
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: calc(50% - 65px);
list-style: none;
}
.naver ul li {
display: inline-block;
vertical-align: top;
}
.naver ul li a {
color: #fff;
border-radius: 5px;
background: #31b0d5;
border: 1px solid #269abc;
display: inline-block;
vertical-align: top;
padding: 4px 17px;
text-decoration: none;
text-transform: capitalize;
}
.disabled {
border-color: #C5C0C0 !important;
background: #C5C0C0 !important;
pointer-events: none;
text-decoration: none;
}
.way section:nth-child(1) {
background: #51AE51;
}
.way section:nth-child(2) {
background: #9999FA;
}
.way section:nth-child(3) {
background: #99FAD6;
}
.way section:nth-child(4) {
background: #C7FA99;
}
.way section:nth-child(5) {
background: #9AAA8B;
}
.way section:nth-child(6) {
background: #EA8383;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
<script>
$(function () {
var sect = {
initialize: function () {
sect.listeners();
},
goTop: $('#arrow_top'),
goBot: $('#arrow_bot'),
way: $('.way'),
listeners: function () {
sect.goBot.on('click', sect.moveBottom);
sect.goTop.on('click', sect.moveTop);
},
moveBottom: function () {
var forTarget$ = $('.active').next().attr('id');
$(this).attr('href', '#' + forTarget$);
var target$ = $(this).attr('href');
$('html, body').animate({
scrollTop : $(target$).offset().top
}, 'slow');
sect.way.children('section'+target$+'')
.prev()
.removeClass('active')
.next()
.addClass('active');
if (!sect.way.children('section'+target$+'').is(':first-child')) {
sect.goTop.removeClass('disabled');
}
if (sect.way.children('section'+target$+'').is(':last-child')) {
sect.goBot.addClass('disabled');
}
return false;
},
moveTop: function () {
var forTarget$ = $('.active').prev().attr('id');
$(this).attr('href', '#' + forTarget$);
var target$ = $(this).attr('href');
$('html, body').animate({
scrollTop : $(target$).offset().top
}, 'slow');
sect.way.children('section'+target$+'')
.next()
.removeClass('active')
.prev()
.addClass('active');
if (!sect.way.children('section'+target$+'').is(':last-child')) {
sect.goBot.removeClass('disabled');
}
if (sect.way.children('section'+target$+'').is(':first-child')) {
$(this).addClass('disabled');
}
return false;
}
}
sect.initialize();
});
</script>
</head>
<body>
<nav class="naver">
<ul>
<li><a href="#" class="disabled" id="arrow_top">top</a></li>
<li><a href="#" id="arrow_bot">bot</a></li>
</ul>
</nav>
<div class="way">
<section class="active" id="link_1">lorem1</section>
<section id="link_2">lorem2</section>
<section id="link_3">lorem3</section>
<section id="link_4">lorem4</section>
<section id="link_5">lorem5</section>
<section id="link_6">lorem6</section>
</div>
</body>
</html>
|
Цитата:
|
слайдер по секциям
malefikus13,
бесконечно в любую сторону и без якорей.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 100%;
line-height: 1.4;
}
body {
font-family: 'Roboto', Verdana, sans-serif;
color: #fff;
}
.way section {
display: block;
width: 100%;
height: 100vh;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.naver {
width: 100%;
position: fixed;
top: 10px;
left: 0;
}
.naver ul {
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: calc(50% - 65px);
list-style: none;
}
.naver ul li {
display: inline-block;
vertical-align: top;
font-weight: bold;
}
.naver ul li{
color: #fff;
border-radius: 5px;
background: #31b0d5;
border: 1px solid #269abc;
display: inline-block;
vertical-align: top;
padding: 4px 17px;
text-transform: capitalize;
}
.way section:nth-child(1) {
background: #51AE51;
}
.way section:nth-child(2) {
background: #9999FA;
}
.way section:nth-child(3) {
background: #99FAD6;
}
.way section:nth-child(4) {
background: #C7FA99;
}
.way section:nth-child(5) {
background: #9AAA8B;
}
.way section:nth-child(6) {
background: #EA8383;
}
#arrow_top:after{
content: "\21D1";
}
#arrow_bot:after{
content: "\21D3";
}
</style>
</head>
<body>
<nav class="naver">
<ul>
<li id="arrow_top"></li>
<li id="arrow_bot"></li>
</ul>
</nav>
<div class="way">
<section >lorem1</section>
<section >lorem2</section>
<section >lorem3</section>
<section >lorem4</section>
<section >lorem5</section>
<section >lorem6</section>
</div>
<script>
var items = document.querySelectorAll("section"), len = items.length;
function fn(b) {
var a = 0;
return function(c) {
"current" != c && (c ? (a--, 0 > a && (a = b - 1)) : (a = ++a % b));
return a
}
};
var fn = fn(len);
function fnShow(a)
{
items[fn(a)].scrollIntoView();
return false
}
document.querySelector("#arrow_top").addEventListener("click", function() {
fnShow(true)
}, false);
document.querySelector("#arrow_bot").addEventListener("click", function() {
fnShow(false)
}, false);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 10:39. |