jQuery выделите элемент - PullRequest
Новая
       130

jQuery выделите элемент

2118 голосов
/ 13 июля 2011

У меня есть 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 по умолчанию.

Ответы [ 29 ]

3778 голосов
/ 13 июля 2011

Предполагая, что у вас есть кнопка с идентификатором 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>
492 голосов
/ 05 октября 2012

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 : число, определяющее дополнительный интервал над целью прокрутки.

duration : Строка или число, определяющие продолжительность анимации.

easing : Строка, указывающая, какую функцию замедления использовать для перехода.

complete : функция, вызываемая после завершения анимации.

328 голосов
/ 24 декабря 2013

Если вы не очень заинтересованы в эффекте плавной прокрутки и просто заинтересованы в прокрутке до определенного элемента, вам не требуется какая-либо функция jQuery для этого.Javascript покрыл ваше дело:

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

Итак, все, что вам нужно сделать, это: $("selector").get(0).scrollIntoView();

.get(0) используется, потому что мы хотим получитьDOM-элемент JavaScript, а не DOM-элемент JQuery.

40 голосов
/ 05 сентября 2013

Использование этого простого скрипта 

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

Сортировало бы, что если в URL-адресе будет найден хеш-тег, scrollTo анимирует идентификатор.Если хеш-тег не найден, игнорируйте скрипт.

31 голосов
/ 18 июля 2014 

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>
22 голосов
/ 06 февраля 2014

Решение от Стива и Питера работает очень хорошо.

Но в некоторых случаях вам может потребоваться преобразовать значение в целое число.Как ни странно, возвращаемое значение из $("...").offset().top иногда находится в float.
Использование: parseInt($("....").offset().top)

Например: 

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});
18 голосов
/ 29 августа 2014

Компактная версия «одушевленного» решения. 

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

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

Основное использование: $('#your_element').scrollTo();

15 голосов
/ 28 января 2015

Если вы обрабатываете только прокрутку до элемента ввода, вы можете использовать focus(). Например, если вы хотите прокрутить до первого видимого ввода: 

$(':input:visible').first().focus();

Или первый видимый ввод в контейнере с классом .error: 

$('.error :input:visible').first().focus();

Спасибо Триши Болл за то, что указал на это!

15 голосов
/ 03 августа 2016

С этим решением вам не нужен плагин, и не требует настройки , кроме размещения скрипта перед закрывающим тегом </body>. 

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

При загрузке, если в адресе есть хеш, мы прокручиваем к нему.

И - всякий раз, когда вы нажимаете ссылку a с хешем href, например #top,мы прокручиваем до него.

9 голосов
/ 20 декабря 2018

Я знаю способ без jQuery: 

document.getElementById("element-id").scrollIntoView();
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...