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

2328

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

javascript jquery scroll DiegoP.
источник

3

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Кристоф Русси,

scrollToбыл отключен для меня из-за хромированного плагина, не уверен, какой.

Джексонкр,

4025

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

Развернуть фрагмент

Стив
источник

24

Это не будет работать во всех случаях. См stackoverflow.com/questions/2905867/...

Янис Elmeris

7

@BarryChapman не совсем так. После поиска в Google я нашел это , поэтому оба тега необходимы, если вы не хотите иметь дополнительную логику для каждого типа браузера.

s3m3n

73

Если вам не нужна анимация, и вместо этого вы хотите мгновенно перейти к элементу, используйте .scrollTop(…)вместо .animate({scrollTop: …}, …).

Рори О'Кейн,

11

В дополнение к вашему решению (которое прекрасно работает), вы можете добавить функцию завершения, которая добавляет хэштег в URL. В этом случае он не будет прокручиваться, потому что scrollTo уже прокручивается в нужную позицию, и если пользователь копирует URL-адрес, он автоматически привязывается к нужному месту на странице.

Сандер

10

если вы используете обратный вызов для запуска, когда анимация завершена, и заметили, что обратный вызов запускается дважды с этим решением, попробуйте использовать «$ ('html body'). animate (..." вместо "$ ('html, body') .animate (... "запятая создала два события animate. Одно для html, другое для body. Вы действительно просто хотите получить одно для html body Спасибо @TJ Crowder stackoverflow.com/questions/8790752/…

BoatCode

526

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

длительность : строка или число, определяющее, как долго будет выполняться анимация.

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

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

Тимоти Перес
источник

2

Это работало до недавнего обновления на Chrome. У меня есть версия, которая работает, которую я сейчас использую на memoryboxweddings.com/photography-posts (если вы хотите попробовать). Я выложу обновление, как только оно будет исправлено.

Тимоти Перес

Исправлено, оказалось, что это был файл JS от jquery.com, который убивал его. Должен работать сейчас, если вы попробуете.

Тимоти Перес

4

@TimothyPerez: я уверен, что это означает что-то разрешающее для коммерческого использования? Я уверен, что есть много людей, которые хотели бы просто использовать этот фрагмент кода в любом месте на своих сайтах, и это помогло бы им немного поспать ночью? Может быть, что-то вроде лицензии MIT может удовлетворить ваши потребности? en.wikipedia.org/wiki/MIT_License

Роберт Массайоли

13

$ ('body') не работал в FF, поэтому попытался $ ('html, body'), который сработал.

kiranvj

5

Если кому-то нужен этот источник скрипта, то здесь вы можете получить его flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

Arturs

370

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

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

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

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

Atharva
источник

12

Не могли бы вы также использовать $(selector)[0]?

RobW

16

RobW, да, вы можете просто использовать [0], но get (0) защищает вас от неопределенных или отрицательных индексов. См. Источник: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

corbacho

21

Если вы вообще не хотите использовать jQuery, просто используйте document.getElementById('#elementID').scrollIntoView(). Не нужно загружать библиотеку ~ 100 Кб, просто чтобы выбрать элемент и затем преобразовать его в обычный JavaScript.

Гэвин

62

@Gavin Я уверен, что вы имели в виду, чтобы быть:document.getElementById('elementID').scrollIntoView()

Брайан

3

Круто. Но перед использованием убедитесь, что браузер поддерживает это. Согласно Mozilla «Это экспериментальная технология»

Tejasvi Hegde

48

Используя этот простой скрипт

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

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

Warface
источник

$(window.location.hash)не будет работать для хэшей, которые не отвечают определению регулярных выражений в jQuery. Например, хэши, содержащие числа. Это также немного опасно; формат ввода должен быть проверен, чтобы вы не выбрали другой элемент.

Дчаке

35

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>

Развернуть фрагмент

davidcondrey
источник

1

Чтобы сделать его более универсальным и убрать ненужное размещение хэштега в окне ссылок браузера, я просто настроил код, как

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

показано

31

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

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

Например:

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

Теджасви Хегде
источник

22

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

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

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

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

Резгар Кадро
источник

22

Это способ, которым я делаю это.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

Работает в любом браузере.

Это можно легко обернуть в функцию

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Вот рабочий пример

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

Развернуть фрагмент

Документы

Эдвард Окерберг
источник

6

Довольно короткая и сладкая. Стоит отметить одну вещь - я думаю, что это прокручивает его только в поле зрения (может быть в нижней части окна просмотра), а не прокручивает его вверху окна просмотра, как это делает настройка scrollTop.

О. Г. Шон

20

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

document.getElementById("element-id").scrollIntoView();

Изменить: Прошло два года, и я до сих пор случайно получить репутацию из этого поста lmao

GameMaster1928
источник

18

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

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

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

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

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

Бенджамин Оукс
источник

17

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

Джонатан
источник

Вероятно, это должно быть > 1вместо 0, просто потому, что /#этот сценарий ломается

Tallboy

Технически не следует заканчивать пустым URL-адресом хэша, если ссылки не построены плохо, но TY. (хотя моя собственная версия этого кода уже содержит этот патч ^^)

Джонатан

С этим кодом связан джиттер, однако его легко исправить. В return false;конце события on click вам необходимо предотвратить действие по умолчанию - немедленную прокрутку до якоря -.

roncli

2

@roncli хорошая мысль - в качестве альтернативы вы можете просто сделатьe.preventDefault();

Джонатан

e.preventDefault()однако не обновляет хэш в URL при нажатии, это всегда URL без хеша

jayasurya_j

8

В большинстве случаев лучше всего использовать плагин. Шутки в сторону. Я собираюсь рекламировать свою здесь . Конечно, есть и другие. Но, пожалуйста, проверьте, действительно ли они избегают ловушек, для которых вы хотите плагин, в первую очередь - не все они делают.

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

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

плох UX.

Анимация не реагирует на действия пользователя. Это продолжается, даже если пользователь щелкает, касается или пытается прокрутить.
Если начальная точка анимации близка к целевому элементу, анимация мучительно медленная.
Если целевой элемент расположен в нижней части страницы, его нельзя прокрутить до верхней части окна. Анимация прокрутки внезапно останавливается в середине движения.

Для решения этих проблем (и многих других ) вы можете использовать мой плагин, jQuery.scrollable . Звонок становится

$( window ).scrollTo( targetPosition );

и это все. Конечно, есть и другие варианты .

Что касается целевой позиции, $target.offset().topвыполняет работу в большинстве случаев. Но учтите, что возвращаемое значение не учитывает границы htmlэлемента ( см. Эту демонстрацию ). Если вам нужно, чтобы целевая позиция была точной при любых обстоятельствах, лучше использовать

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Это работает, даже если граница htmlэлемента установлена.

hashchange
источник

8

Анимации:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

источник

8

Если вы хотите прокрутить содержимое контейнера переполнения (вместо $('html, body')ответа выше), работая также с абсолютным позиционированием, это можно сделать следующим образом:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

FAjir
источник

7

Простой способ добиться прокрутки страницы до цели div id

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

Иршад Хан
источник

6

Это мой подход к абстракции идентификаторов и ссылок с использованием универсального селектора классов

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

Развернуть фрагмент

vascogaspar
источник

6

Очень простой и удобный пользовательский плагин jQuery. Просто добавьте атрибут scroll=к вашему интерактивному элементу и установите его значение для селектора, к которому вы хотите перейти.

Как так: <a scroll="#product">Click me</a>. Может использоваться на любом элементе.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

DevWL
источник

4

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

kayz1
источник

4

$('html, body').animate(...) не для меня на iphone, Android-браузер Chrome Safari.

Мне пришлось настроить таргетинг на корневой элемент содержимого страницы.

$ ( '# Cotnent'). Одушевленные (...)

Вот что я закончил

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Все содержимое тела связано с #content div

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

Shahdat
источник

Вы действительно не должны использовать пользовательский агент сниффинг. webaim.org/blog/user-agent-string-history

Алекс Подворный

Добавить перерыв слова: разбить все; на ваш элемент CSS, который находится в беде. Веб-просмотр на Android / iOS jQuery.animate ({scrollTop: y}) позиция Неверно. medium.com/@ellery.leung/...

daliaessam

4

Это ответ Атхарвы с: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Просто хотел добавить, если ваш документ находится в iframe, вы можете выбрать элемент в родительском фрейме для прокрутки в представлении:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

cynya
источник

3

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

источник

3

Когда пользователь нажимает на этот ввод с помощью #subject, страница должна перейти к последнему элементу страницы с хорошей анимацией. Это должна быть прокрутка вниз, а не вверх.

Последний элемент страницы - кнопка отправки с #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

Это будет сначала прокрутить вниз до #submit затем восстанавливать курсор к тому вводу, по которому щелкнули, который имитирует прокрутку вниз и работает в большинстве браузеров. Он также не требует jQuery, так как он может быть написан на чистом JavaScript.

Может ли этот способ использовать focusфункцию, имитирующую анимацию лучше, через цепочку focusвызовов. Я не проверял эту теорию, но это выглядело бы примерно так:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

Khaled.K
источник

3

Я настроил модуль scroll-element npm install scroll-element . Это работает так:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Написано с помощью следующих SO сообщений:

Вот код:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

svnm
источник

2

Чтобы показать полный элемент (если это возможно с текущим размером окна):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

Роман Шамрицкий
источник

2

Я написал функцию общего назначения, которая прокручивает либо объект jQuery, селектор CSS, либо числовое значение.

Пример использования:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

Код функции:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

isapir
источник

2

Для чего это стоит, вот как мне удалось добиться такого поведения для общего элемента, который может быть внутри DIV с прокруткой. В нашем случае мы прокручиваем не полное тело, а только отдельные элементы с переполнением: auto; в более крупном плане.

Он создает ложный ввод высоты целевого элемента, а затем помещает на него фокус, и браузер позаботится об остальном, независимо от того, насколько глубоко вы находитесь внутри прокручиваемой иерархии. Работает как шарм.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

martinh_kentico
источник

2

Это сработало для меня:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

полярная звезда
источник

2

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>

Развернуть фрагмент

Minguocode
источник

2

ОДИН ЛАЙНЕР

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

Показать фрагмент кода

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

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

<div class="box">
  Some content
  <textarea></textarea>
</div>

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

<div class="foot">Some footer</div>

Развернуть фрагмент

Камил Келчевски
источник

1

это работает отлично!

jjoselon

1

Обновленный ответ с 2019 года:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

stardust4891
источник

Вы должны этот селектор для тела: [document.documentElement, document.body] И не нужно смещение тела в уравнении. $ ('# subject'). offset (). top достаточно.

ali6p

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

Ответы: