jQuery прокрутка до елемента

У мене є цей "вхідний" елемент:

<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 за замовчуванням для досягнення цієї мети.

Maistrenko Vitalii
Edited question 26-го вересня 2017 в 12:18
Програмування
javascript jquery
13-го липня 2011 в 9:49
1 вид
Рішення

Припускаючи, що у вас є кнопка з ідентифікатором button, спробуйте цей приклад:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Код я взяв зі статті Плавна прокрутка до елемента без плагіна jQuery. І протестував його на прикладі нижче.


    <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>
    Click me
php_nub_qq
Edited answer 8-го липня 2018 в 2:48
Коментарі (24)

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: Функція для виклику після завершення анімації.

Alex78191
Edited answer 17-го травня 2017 в 10:37
Коментарі (11)

За допомогою цього простого скрипта

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Зробить в сортуванні, що якщо в url знайдений хеш-тег, то scrollTo анімувати на ID. Якщо хеш-тег не знайдено, то ігнорувати скрипт.

Warface
Edited answer 24-го листопада 2017 в 4:34
Коментарі (0)