JQuery - Анимация scrollTop
У меня есть две кнопки и 2 скрытые части, связанные с этими кнопками. При нажатии кнопки отображается соответствующая часть, и документ прокручивается вверх.
Проблема: деталь отображается, но не перемещается наверх.
Пожалуйста помоги. Спасибо!
HTML
<div style = "border:1px solid black;width:100px;height:250px;overflow:auto">
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
</div>
<a data-target = "one">First Button</a>
<a data-target = "two">Second Button</a>
<hr>
<div class = "hide" id = "one">First Element</div>
<hr>
<div class = "hide" id = "two">Second Element</a>
<hr>
JS
$("a").click(function(e) {
e.preventDefault();
var target = $(this).data("target");
$('#' + target).show().animate({
scrollTop: "0px"
}, 800);
});
Элементы (Первый элемент, Второй элемент) переместятся наверх после того, как мы нажмем на кнопку «Первый» или «Второй элемент».
Почему бы просто не переместить их в разметку HTML? Вам нужно быть анимированным?
Что-то вроде этого? jsfiddle.net/rb0z2htp/1
Таблица будет длинной, и когда я прокручиваю вниз, я вижу кнопки «Первая» и «Вторая». После того, как я нажму одну из кнопок, если я не переместу первый элемент вверх, он будет отображаться, но не отображаться. Дело в том, что стол нужно сдвинуть вверх и сделать невидимым, чтобы элементы (они тоже были длинными) отображались вверху.
Я не понимаю (извините, это моя вина). Возможно, это поможет CDD 333. Замените эту строку кода своими кодами после CDD 333.
Спасибо, Колин Клайн, за помощь. Да, это так хорошо работает! Как я могу проголосовать за ваш ответ? Пожалуйста, дай мне знать.
Я выложил решение как ответ. Вы можете проголосовать там и принять это как свой ответ. Заранее спасибо.
Ответы 1
Чтобы прокрутить вверх, вы должны использовать этот код js, и лучше не использовать таким образом селекторы, такие как a, потому что он заставит js запускать нашу функцию для каждого отдельного тега a. Модифицируйте его таким образом $("a[data-target]")
$("a[data-target]").click(function(e) {
e.preventDefault();
var target = $(this).data("target");
$('#' + target).show();
$(document).animate({ scrollTop: "0px" }, 800);
});
Или для лучшего результата вы можете сделать его асинхронным:
$("a[data-target]").click(function(e) {
e.preventDefault();
var target = $(this).data("target");
$('#' + target).show("slow", function(){
$(document).animate({ scrollTop: "0px" }, 800);
});
});
Элемент переместить вверх или документ (браузер) переместиться вверх? Или элемент - это текстовое поле, которое прокручивается до верхней строки? Кстати, во всех случаях ваш код и CSS неверны