Навигация по якорям вперед\назад
Здравствуйте!
Есть некоторый массив якорей в div. Его границы фиксированы. Возможно ли сделать так, чтобы перемещение по якорям происходило не по нажатию на конкретную ссылку, ведущую на якорь, а просто две ссылки вперед\назад? Сейчас вид такой:
<style>
#x {
width:200;
height:200;
overflow: scroll;
overflow-x: hidden;
}
</style>
<a href="#1" onclick="document.getElementByName('1').style.top='0';">1</a>
<a href="#2" onclick="document.getElementByName('2').style.top='200';">2</a>
<a href="#3" onclick="document.getElementByName('3').style.top='400';">3</a>
<a href="#4" onclick="document.getElementByName('4').style.top='600';">4</a>
...
<div id=x>
<a name="1"></a>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<a name="2"></a>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<a name="3"></a> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t
<a name="4"></a>ext text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
Думаю, что это не сложно, чтобы вместо массы ссылок было только вперед\назад.. Посмотрел по форуму, но ничего подобного не нашел.. Буду вам весьма признателен за вашу помощь! |
<style>
#x {
width: 200px;
height: 200px;
overflow: scroll;
overflow-x: hidden;
margin-top: 20px;
}
.control {
position: fixed;
top: 0;
right: 0;
}
</style>
<div id="x">
<a name="1"></a><b>text</b> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text
<a name="2"></a><b>text</b> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text
<a name="3"></a><b>text</b> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text t
<a name="4"></a><b>text</b> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text
</div>
<div class="control">
<a id="prev" href="#">Назад</a>
<a id="next" href="#">Вперед</a>
</div>
<script>
function nav(arr) {
var current = 0,
len = arr.length - 1;
this.next = function() {
current = current < len ? current + 1 : 0;
return arr[current];
};
this.prev = function() {
current = current > 0 ? current - 1 : len;
return arr[current];
};
}
var links = document.querySelectorAll('#x a[name]'),
control = new nav(links),
a = document.createElement('a');
prev.onclick = function() {
a.href = '#' + control.prev().name;
a.click();
return false;
}
next.onclick = function() {
a.href = '#' + control.next().name;
a.click();
return false;
}
</script>
|
Poznakomlus,
ок |
Poznakomlus, Простите, но.. Думаю, что делаю что-то не так, потому как скрипт не работает.. Наверное я совсем глупый..
[UPD] Не работает.. в Лисе, в Хроме все хорошо.. |
donkey,
пример выше работает, значит вы не туда или не так вставляете код попробуйте обернуть его в window.onload
window.onload = function(){
// сюда код вставляем
};
|
Poznakomlus, увы.
Firefox 48.0, Ubuntu ): В Хроме все ок. В любом случае, я вам очень признателен.. Правда. Был уверен, что решение должно быть очень простым и.. Кроссбраузерным.. Жаль, что так. |
<style>
#x {
width: 200px;
height: 200px;
overflow: scroll;
overflow-x: hidden;
margin-top: 20px;
}
.control {
position: fixed;
top: 0;
right: 0;
}
</style>
<div id="x">
<a name="1"></a><b>1</b> text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text
text
<a name="2"></a><b>2</b> text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text
text
<a name="3"></a><b>3</b> text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text
text text text text text text text text text text text t
<a name="4"></a><b>4</b> text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text
text text text text text text
</div>
<div class="control">
<a id="prev" href="#">Назад</a>
<a id="next" href="#">Вперед</a>
</div>
<script>
window.onload = function () {
function nav(arr) {
var current = 0,
len = arr.length - 1;
this.next = function () {
current = current < len ? current + 1 : 0;
return arr[current];
};
this.prev = function () {
current = current > 0 ? current - 1 : len;
return arr[current];
};
}
var links = document.querySelectorAll('#x a[name]'),
a = document.createElement('a'),
control = new nav(links);
prev.onclick = function () {
a.href = '#' + control.prev().name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
return false;
};
next.onclick = function () {
a.href = '#' + control.next().name;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
return false;
};
}
</script>
|
Poznakomlus, Un grand merci!
Это очень здорово! Правда! Спасибо вам! |
| Часовой пояс GMT +3, время: 23:00. |