Я хочу создать кнопки прокрутки вверх.
Это мой код в JS. Проблема в том, что, хотя у меня есть 3 кнопки с одинаковым идентификатором, я могу использовать только одну при каждой загрузке страницы. Почему это происходит? Что я должен делать?
ОБНОВЛЕНИЕ
Я не знал, что могу использовать идентификатор только один раз. Я перепробовал все предложенные решения, но по какой-то причине getElementsByClassName тоже не работает. :(
Решение было заменить на:
$('.scrolltotop').on('click', function(){/* do your stuff */});
Вот мой HTML тоже:
<ul class="stats">
<li class="scrolltotop"><a href="#">GO TO TOP</a></li>
</ul>
JS:
document.getElementsByClassName('scrolltotop').onclick = function () {
scrollTo(document.body, 0, 100);
}
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 2;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
scrollTo(element, to, duration - 2);
}, 10);
}
4 ответа
Новый код Это должно работать.
getElementsByClassName
вернет вам только array-like object
всех элементов, имеющих имя класса. Вы должны зациклить это и назначить это один за другим.
var classData = (document.getElementsByClassName('scrolltotop'));
for(var i = 0; i < classData.length; i++)
{
classData[i].onclick = function()
{
scrollTo(document.body, 0, 100);
}
}
function scrollTo(element, to, duration)
{
if(duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 2;
setTimeout(function()
{
element.scrollTop = element.scrollTop + perTick;
scrollTo(element, to, duration - 2);
}, 10);
}
Другой способ сделать это легко - использовать jQuery.
$('.scrolltotop').on('click', function(){/* do your stuff */});
Используйте класс вместо идентификатора, если вам нужно использовать его несколько раз. Идентификатор предназначен для использования только один раз, в то время как класс может использоваться любое количество раз. getElementById () все еще должен работать с классами.
Пожалуйста, используйте класс для него, так как идентификатор уникален для каждого элемента
var classname = document.getElementsByClassName("scrolltotop");
for (var i = 0; i < classname.length; i++) {
classname[i].onclick = function () {
scrollTo(document.body, 0, 100);
}
}
function scrollTo(element, to, duration) {
if (duration < 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 2;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
scrollTo(element, to, duration - 2);
}, 10);
}
Не создавайте разметку, содержащую элементы с дублирующимися идентификаторами. Это сломает вещи, и вы будете искалеченными на велоцираптор быстрее, чем вы можете сказать "goto"
.
Вместо этого используйте классы :
<img src='...' class='scrolltotop' />
<img src='...' class='scrolltotop' />
document.getElementsWithClass('scrolltotop').onclick = function () {
scrollTo(document.body, 0, 100);
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.