Переходы по пунктам страницы на JavaScript

JavaScript
Ева
15.07.2018 11:59:54 am
Доброго, воскресного дня!
На каждой странице сайта есть кнопки "Вверх" / "В низ", каждая кнопка перемещает пользователя к самому началу страницы или к самому концу, очень быстро. К данному перемещению надо дописать скрипт, что будет перемещать пользователя на один пункт в низ или вверх.

Все пункты основного содержимого страницы помещены в блоки с такой структурой: 
<div class="paragraph">
    <h3></h3>
    <p></p>
</div>

Таких блоков на одной странице может быть очень много, их количество зависит от объёма статьи.

Буду Вам очень признательна, за написание таких переходов!
Dolphin
16.07.2018 08:26:17 am
Здравствуйте, Ева!
Я ни чего умнее не придумал, кроме, как добавить ко всем блокам идентификатор (paragraph_XX), который будет служить для перехода от одного блока к другому. При переходе, в ссылке будет изменяться значение "href" при помощи JS.

Значит, добавляет на страницу блок с двумя ссылками:
<div id="menu_paragraph">
    <a href="#paragraph_1" class="menu_link" onclick="transition(this, '-');">К предыдущему</a>
    <br />
    <a href="#paragraph_2" class="menu_link" onclick="transition(this, '+');">К следующему</a>
</div>

Блок должен быть зафиксирован, для этого можно использовать примерно такой стиль:
#menu_paragraph {
    position: fixed;
    right: 10px;
    top: 30px;
}

Для фиксации, этого вполне хватает. По желанию можно изменить внешний вид ссылок и самого блока.

Дальше вставляем JS:
var paragraph = document.getElementsByClassName('paragraph'), n = 1;
for (var i = 0; paragraph.length > i; i++) {
	paragraph[i].id = 'paragraph_' + n;
	n++;
};

function transition(val, sign) {
	var menuLink = document.getElementsByClassName('menu_link');
	for (var i = 0; menuLink.length > i; i++) {
		var urls = menuLink[i].href.split('_');
		var n = urls[urls.length - 1];

		if (sign == '+') {
			menuLink[i].href = '#paragraph_' + (Number(n) + 1);
		}
		else {
			menuLink[i].href = '#paragraph_' + (Number(n) - 1);
		};
	};
};

Вот и все.

Попробуйте, если, что то не так, сообщите, допишем/поправим.
Ева
21.07.2018 09:49:14 am
Здравствуйте, Slash!
Спасибо за программу, переходы от пункта к пункту работают, что в низ, что в верх. Единственная проблема, допустим на странице всего 7 пунктов, мы нажимаем на кнопку, чтобы перейти к следующему, несуществующему пункту, в адресной строке будет окончание "#paragraph_8", потом "#paragraph_9", "#paragraph_10" и т. д. Если мы нажимаем кнопку, чтобы перейти к предыдущему пункту, а предыдущего не существует, он равен меньше 1, окончание адресной строки так же будет показывать то, чего нет: "#paragraph_0", "#paragraph_-1", "#paragraph_-2" и т. д. Можно это исправить, чтобы в адресной строке было только то, то, что на самом деле есть?
Dolphin
21.07.2018 12:57:17 pm
Немного поправил JS. Теперь если предыдущего пункта нет, то перекинет на самый последний. Если следующего пункта нет, то перекинет на самый первый.

Просто замените JS код полностью на этот:
var paragraph = document.getElementsByClassName('paragraph'), n = 1;
var paragraphCount = paragraph.length;

for (var i = 0; paragraphCount > i; i++) {
	paragraph[i].id = 'paragraph_' + n;
	n++;
};

function transition(val, sign) {
	var menuLink = document.getElementsByClassName('menu_link');
	for (var i = 0; menuLink.length > i; i++) {
		var urls = menuLink[i].href.split('_');
		var n = urls[urls.length - 1];

		if (sign == '+') {
			n = Number(n) + 1;
			if (paragraphCount < n) {
				n = 1;
			};

			menuLink[i].href = '#paragraph_' + n;
		}
		else {
			n = Number(n) - 1;
			if (n == 0) {
				n = paragraphCount;
			};

			menuLink[i].href = '#paragraph_' + n;
		};
	};
};
Ева
21.07.2018 04:21:32 pm
Slash, спасибо, Вы проделали огромную работу, сейчас все очень хорошо.