Питання jQuery перейдіть до елемента


У мене є це input елемент:

<input type="text" class="textfield" value="" id="subject" name="subject">

Потім у мене є інші елементи, як і інші текстові входи, текстові поля тощо.

Коли користувач натискає на це input з #subject, на сторінці слід прокрутити до останнього елемента сторінки з приємною анімацією. Це повинно бути прокручуванням донизу, а не до вершини.

Останній елемент сторінки - це submit кнопка з #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Анімація не повинна бути надто швидкою і повинна бути вільною.

Я використовую останню версію jQuery. Я вважаю за краще не встановлювати жодного плагіна, а використовувати його за замовчуванням за допомогою функцій jQuery за замовчуванням.


1875
2017-07-13 09:49


походження




Відповіді:


Припускаючи, що у вас є кнопка з ідентифікатором 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>


3481
2017-07-13 09:52



Це не буде працювати у всіх випадках. Побачити stackoverflow.com/questions/2905867/... - Jānis Elmeris
@BarryChapman не точно. Після googling я знайшов це, тому потрібні обидва теги, якщо ви не хочете мати додаткову логіку за типом браузера. - s3m3n
Якщо ви не хочете анімації, а замість цього хочете миттєво перейти до елемента, скористайтеся .scrollTop(…)замість .animate({scrollTop: …}, …). - Rory O'Kane
Крім того, ви вирішили (що відмінно працює), ви можете додати повну функцію, яка додає хештег до URL-адреси. У цьому випадку воно не прокручується, оскільки scrollTo вже прокручується в потрібну позицію, і якщо користувач копіює URL-адресу, він автоматично перейде до потрібного місця на сторінці. - Sander
якщо ви використовуєте функцію зворотного виклику для запуску, коли анімація завершена, і повідомлення про зворотний виклик двічі викликає це рішення, спробуйте використати "$ ('html body'). анімуйте (..." замість "$ ('html, body') .animate (... ") у комах створено дві анімаційні події: один для html, один для тіла, ви просто хочете одне для html тіла. Спасибо @ TJ Crowder stackoverflow.com/questions/8790752/... - BoatCode


  jQuery .scrollTo() Method 

jQuery. scrollTo ():  Перегляд - Демо, API, Джерело

Я написав цей легкий плагін, щоб набагато простіше прокрутити сторінку / елемент. Це гнучко, де можна передати елемент-ціль або вказане значення. Можливо, це може бути частиною наступного офіційного релізу 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

Варіанти:

scrollTarget: Елемент, рядок чи число, що вказує на бажану позицію прокручування.

offsetTop: Число, яке визначає додатковий пробіл вище цільової прокрутки.

тривалість: Рядок або число, що визначає тривалість анімації.

ослаблення: Рядок, що вказує, яке полегшення функції використовувати для переходу.

завершити: Функція дзвінка, коли анімація завершена.


454
2017-10-05 08:50



Демо не працює на хроме - alex
Він працював до останнього оновлення Chrome. У мене є версія, яка працює, що я використовую на memoryboxweddings.com/photography-posts (якщо ви хочете спробувати). Я опублікую оновлення, коли його буде виправлено. - Timothy Perez
@ ТимотіПерез: Я впевнений, що це означає щось полегшене для комерційного використання? Я впевнений, що є багато людей, які хотіли б просто використовувати цей фрагмент коду будь-де на своїх веб-сайтах, і це допомогло їм спати трохи легше вночі? Може, щось подібне до ліцензії MIT може відповідати вашим потребам? en.wikipedia.org/wiki/MIT_License - Robert Massaioli
$ ('body') не працював в FF, тому намагався $ ('html, body'), який працював. - kiranvj
Якщо хтось потребує цього джерела сценарію, то тут ви можете це отримати flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturs


Якщо вас не дуже цікавить гладкий ефект прокручування та просто цікавить прокручування до певного елемента, для цього вам не потрібна деяка функція jQuery. Javascript покриває вашу справу:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Отже, все, що вам потрібно зробити, це: $("selector").get(0).scrollIntoView(); 

.get(0) використовується тому, що ми хочемо отримати елемент DOM JavaScript, а не елемент DOM JQuery.


271
2017-12-24 11:35



Спасибі, ви можете дати різницю між елементом DOM JavaScript та JQuery. - Francisco Corrales Morales
Не могли б ви також використовувати $(selector)[0]? - RobW
RobW, так, ви можете просто використовувати [0], але отримати (0) захистить вас від невизначених чи негативних індексів. Дивіться джерело: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho
Якщо ви взагалі не бажаєте використовувати jQuery, просто використовуйте document.getElementById('#elementID').scrollIntoView(). Не використовуйте завантаження бібліотеки ~ 100k просто, щоб вибрати елемент, а потім перетворити його на звичайний JavaScript. - Gavin
@ Гавін Я впевнений, що ви мали на увазі це бути: document.getElementById('elementID').scrollIntoView() - Brian


Перевірте ScrollTo підключати. Ви можете побачити демо тут.

Я сподіваюсь, це допомагає.


42
2017-07-13 11:05



Я думаю, що варто відзначити, що плагін Тимофія Періза обмежений в осі Y, тоді як Аріель Флеслер (зв'язаний у цьому відповіддю) більше кухонної раковини, яка підтримує як прокручування x, так і y, що може бути важливим для розгляду, наприклад, коли з'являється модальне діалогове вікно на мобільному телефоні, або звернути увагу на певну частину широкого столу чи форми на мобільному телефоні. - Chris Moschini


jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06





Використання цього простого сценарію

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

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


26
2017-09-05 11:53





Рішення Стіва і Петра працює дуже добре.

Але в деяких випадках вам доведеться перетворити цінність у ціле число. Як не дивно, повернуте значення від $("...").offset().top іноді в float.
Використання: parseInt($("....").offset().top)

Наприклад:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39





Компактна версія "анімаційного" рішення.

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Основне використання: $('#your_element').scrollTo();


15
2017-08-29 11:19