Прокрутите до элемента с помощью jQuery

avatar
DiegoP.
13 июля 2011 в 09:49
2833067
32
2522

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

Источник
Christophe Roussy
9 декабря 2018 в 13:25
10

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

Jacksonkr
26 июля 2019 в 17:53
0

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

Abhi
10 сентября 2021 в 11:40
0

coderhelper.com/a/53873376/2968762 - лучший ответ (поскольку также используется тег javascript). Не уверен, почему он заблокирован без надобности.

Ответы (32)

avatar
Steve
13 июля 2011 в 09:52
4299

Предполагая, что у вас есть кнопка с идентификатором 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>
Jānis Elmeris
25 апреля 2012 в 14:43
31

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

Rory O'Kane
20 сентября 2013 в 19:53
75

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

Adarsh Punj
18 июля 2021 в 08:34
1

Если вы пытаетесь прочитать эту статью, вот рабочая ссылка: Плавно прокрутите до элемента без плагина jQuery

avatar
Vu Viet Hung
26 августа 2020 в 06:42
7

После того, как я нашел способ заставить мой код работать, я думаю, мне следует прояснить ситуацию: Для использования:

$('html, body').animate({
   scrollTop: $("#div1").offset().top
}, 2000);

вам нужно быть вверху страницы, поскольку $("#div1").offset().top будет возвращать разные числа для разных позиций, к которым вы прокручиваете. Если вы уже прокрутили верхнюю часть экрана, вам необходимо указать точное значение pageY (см. Определение pageY здесь: https://javascript.info/coordinates).

Итак, теперь проблема состоит в том, чтобы вычислить значение pageY одного элемента. Ниже приведен пример в случае, если контейнер прокрутки является телом:

function getPageY(id) {
    let elem = document.getElementById(id);
    let box = elem.getBoundingClientRect();
    var body = document.getElementsByTagName("BODY")[0];
    return box.top + body.scrollTop; // for window scroll: box.top + window.scrollY;
}

Вышеупомянутая функция возвращает то же число, даже если вы куда-то пролистали. Теперь, чтобы вернуться к этому элементу:

$("html, body").animate({ scrollTop: getPageY('div1') }, "slow");
avatar
Jaber Alshami
13 августа 2020 в 10:19
2

Вам просто нужно:

$("selector").get(0).scrollTo(0, 0)
Julien Jacobs
13 августа 2020 в 12:33
1

И вы можете использовать его с параметрами для сглаживания прокрутки с помощью чего-то вроде element.scrollTo ({top: 100, left: 100, behavior: 'smooth'}); См. developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo

Nico Haase
13 августа 2020 в 12:45
0

Пожалуйста, добавьте пояснение к своему ответу, чтобы другие могли извлечь из него уроки.

Andrey Artemyev
12 октября 2020 в 11:04
0

Это просто. «Внутри» каждого объекта jQuery есть простой элемент javascrip. Вы можете получить к нему доступ через метод .get (api.jquery.com/get/#get-index) или просто вызвав [0]: $ ("selector"). Get (0) of $ ( "селектор") [0]. Вы получите элемент JS, как если бы вы получили его через document.getElementById ("selector_id"). Таким образом, вы можете вызвать любую функцию JS, например scrollTo или scrollIntoView.

avatar
Kamil Kiełczewski
8 января 2020 в 11:16
3

ONELINER

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>
avatar
Edvard Åkerberg
20 июня 2019 в 13:59
37

Я так и делаю.

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>

Документы

OG Sean
4 августа 2019 в 02:19
6

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

informatik01
31 июля 2021 в 04:45
0

Я также использовал это решение, но по крайней мере Chrome версии 92 по какой-то причине по умолчанию отключил плавную прокрутку, поэтому это решение больше не работает (на момент написания). На самом деле довольно разочаровывающе. Его по-прежнему можно включить вручную, выбрав « Включено » (вместо «По умолчанию») для конфигурации chrome://flags/#smooth-scrolling.

avatar
Minguocode
19 марта 2019 в 15:25
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>
avatar
stardust4891
17 января 2019 в 19:58
3

Обновленный ответ от 2019 г .:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
ali6p
19 ноября 2019 в 14:43
0

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

avatar
object-Object
20 декабря 2018 в 17:22
90

Это возможно без jQuery:

document.getElementById("element-id").scrollIntoView();
meagar
27 августа 2021 в 03:23
0

Пожалуйста, прекратите редактировать свой вопрос, чтобы ввести неуместную болтовню. Миллионы ответов по-прежнему дают репутацию их авторам «годы спустя». Нам не нужно это вызывать, это не добавляет ничего ценного ни к вопросу, ни к сайту.

avatar
Polaris
7 ноября 2018 в 08:51
2

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

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
avatar
cynya
22 сентября 2018 в 04:25
4

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

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();
avatar
Irshad Khan
10 октября 2017 в 13:03
10

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

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
avatar
a11r
23 сентября 2017 в 00:11
10

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

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

container.animate({
  scrollTop: pos
}
avatar
user7601056
27 февраля 2017 в 10:09
9

Анимации:

// 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
  });  
});
avatar
Shahdat
4 января 2017 в 15:11
4

$('html, body').animate(...) у меня не работает в браузерах iPhone, Android, Chrome или Safari.

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

$ ('# cotnent'). Animate (...)

Вот что у меня получилось:

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>
Alex Podworny
10 февраля 2017 в 21:22
0

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

daliaessam
6 апреля 2019 в 21:55
0

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

avatar
svnm
23 ноября 2016 в 12:33
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 }
}
avatar
Jonathan
2 августа 2016 в 23:09
19

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

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

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

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

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

## Edit 2020

Если вам нужно решение на чистом JavaScript: вы могли бы вместо этого использовать что-то вроде:

var _scrollToElement = function (selector) {
  try {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' });
  } catch (e) {
    console.warn(e);
  }
}

var _scrollToHashesInHrefs = function () {
  document.querySelectorAll("a[href^='#']").forEach(function (el) {
    el.addEventListener('click', function (e) {
      _scrollToElement(el.getAttribute('href'));
      return false;
    })
  })
  if (window.location.hash) {
    _scrollToElement(window.location.hash);
  }
}

_scrollToHashesInHrefs();

avatar
martinh_kentico
26 февраля 2016 в 11:40
2

Как бы то ни было, вот как мне удалось добиться такого поведения для общего элемента, который может находиться внутри DIV с прокруткой. В нашем случае мы прокручиваем не все тело, а только отдельные элементы с помощью overflow: 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();
avatar
DevWL
11 января 2016 в 04:32
7

Очень простой и легкий в использовании настраиваемый плагин 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>
avatar
Khaled.K
28 ноября 2015 в 12:34
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>
avatar
isapir
18 ноября 2015 в 19:46
3

Я написал функцию общего назначения, которая выполняет прокрутку до объекта 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);
};
avatar
hashchange
17 августа 2015 в 09:18
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.

avatar
kayz1
3 июля 2015 в 06:27
4
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
avatar
vascogaspar
21 июня 2015 в 16:46
6

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

$(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>
avatar
Benjamin Oakes
28 января 2015 в 17:00
18

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

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

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

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

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

avatar
Rezgar Cadro
29 августа 2014 в 11:19
24

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

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

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

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

avatar
davidcondrey
18 июля 2014 в 18:06
43

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>
bubencode
12 августа 2018 в 14:27
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); }); });

avatar
Roman Shamritskiy
25 марта 2014 в 00:10
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);
avatar
user669677
12 февраля 2014 в 14:22
4
$('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);
avatar
Tejasvi Hegde
6 февраля 2014 в 15:39
37

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

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

Например:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});
avatar
Atharva
24 декабря 2013 в 11:35
422

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

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

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

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

RobW
17 марта 2014 в 19:02
16

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

corbacho
2 апреля 2014 в 14:16
19

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

Gavin
23 июня 2014 в 18:59
25

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

Brian
18 сентября 2014 в 21:40
73

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

avatar
Warface
5 сентября 2013 в 11:53
57

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

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

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

avatar
Timothy Perez
5 октября 2012 в 08:50
554

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

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

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

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

kiranvj
5 июля 2013 в 16:08
15

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

Arturs
7 ноября 2013 в 15:18
7

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