Форум

donkey · #1 (**permalink**) 19.08.2016, 14:11

Здравствуйте!

Есть некоторый массив якорей в 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>

Думаю, что это не сложно, чтобы вместо массы ссылок было только вперед\назад.. Посмотрел по форуму, но ничего подобного не нашел..

Буду вам весьма признателен за вашу помощь!

Vlasenko Fedor · #2 (**permalink**) 19.08.2016, 15:24

<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>

рони · #3 (**permalink**) 19.08.2016, 15:33

Poznakomlus,
ок

donkey · #4 (**permalink**) 19.08.2016, 16:45

Poznakomlus, Простите, но.. Думаю, что делаю что-то не так, потому как скрипт не работает.. Наверное я совсем глупый..

[UPD] Не работает.. в Лисе, в Хроме все хорошо..

Vlasenko Fedor · #5 (**permalink**) 19.08.2016, 16:49

donkey,
пример выше работает, значит вы не туда или не так вставляете код
попробуйте обернуть его в window.onload

window.onload = function(){
// сюда код вставляем
};

donkey · #6 (**permalink**) 19.08.2016, 17:06

Poznakomlus, увы.

Firefox 48.0, Ubuntu

):

В Хроме все ок.

В любом случае, я вам очень признателен.. Правда.

Был уверен, что решение должно быть очень простым и.. Кроссбраузерным.. Жаль, что так.

Vlasenko Fedor · #7 (**permalink**) 19.08.2016, 17:20

<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>

donkey · #8 (**permalink**) 19.08.2016, 18:10

Poznakomlus, Un grand merci!

Это очень здорово! Правда! Спасибо вам!

Форум

Справочник

Discord чат

Курсы javascript