У мене є цей "вхідний" елемент:
<input type="text" class="textfield" value="" id="subject" name="subject">
Потім у мене є деякі інші елементи, такі як інші текстові входи, текстові області тощо.
Коли користувач натискає на цей input
з #subject
, сторінка повинна прокручуватися до останнього елемента сторінки з гарною анімацією. Це має бути прокрутка вниз, а не вгору.
Останній елемент сторінки - це кнопка "Відправити" з написом "#submit":
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
Анімація не повинна бути занадто швидкою і повинна бути плавною.
Я використовую останню версію jQuery. Я вважаю за краще не встановлювати ніяких плагінів, а використовувати функції jQuery за замовчуванням для досягнення цієї мети.
Припускаючи, що у вас є кнопка з ідентифікатором button
, спробуйте цей приклад:
$("#button").click(function() {
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);
});
Код я взяв зі статті Плавна прокрутка до елемента без плагіна jQuery. І протестував його на прикладі нижче.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#click").click(function (){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
</html>
jQuery .scrollTo(): View - Demo, API, Source **jQuery.scrollTo(): [ View - Demo, API, Source
Я написав цей легкий плагін, щоб зробити прокрутку сторінок/елементів набагато простішою. Він є гнучким, де ви можете передати цільовий елемент або вказане значення. Можливо, це може бути частиною наступного офіційного релізу jQuery, що ви думаєте?
**Приклади використання
$('body').scrollTo('#target'); // Scroll screen to target element
$('body').scrollTo(500); // Scroll screen 500 pixels down
$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down
Опції:
ціль прокрутки: Елемент, рядок або число, яке вказує на бажану позицію прокрутки.
offsetTop: Число, яке визначає додатковий інтервал над метою прокрутки.
duration: Рядок або число, що визначає, як довго буде працювати анімація.
згладжування: Рядок, що вказує, яку функцію згладжування використовувати для переходу.
complete: Функція для виклику після завершення анімації.
За допомогою цього простого скрипта
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
Зробить в сортуванні, що якщо в url знайдений хеш-тег, то scrollTo анімувати на ID. Якщо хеш-тег не знайдено, то ігнорувати скрипт.