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

2323

У мене є цей 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
— Крістоф Руссі
scrollToбув відключений для мене через хромований плагін, не впевнений, який.
— Джексонкр

Відповіді:

4020

Припустимо, що у вас є кнопка з ідентифікатором 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 не зовсім. Після googling я знайшов це , тому обидва теги потрібні, якщо ви не хочете мати зайву логіку на тип браузера.
— s3m3n
73
Якщо ви не хочете анімації, а натомість хочете миттєво перейти до елемента, використовуйте .scrollTop(…)замість .animate({scrollTop: …}, …).
— Rory O'Kane
11
Окрім вашого рішення (яке чудово працює), ви можете додати повну функцію, яка додає хештег до URL-адреси. У цьому випадку він не буде прокручуватися, тому що прокруткаВже прокручується до потрібної позиції, і якщо користувач скопіює URL-адресу, він автоматично перейде в потрібне місце на сторінці.
— Сандер
10
якщо ви використовуєте зворотний виклик для запуску, коли анімація завершена, і помічаєте зворотній зв'язок двічі за допомогою цього рішення, спробуйте скористатися "$ ('html body'). animate (..." замість "$ ('html, body') .animate (... »кома створила два морського події один для HTML, один для тіла , ви на самому справі просто хочете один для HTML тіла Спасибі @TJ Crowder .. stackoverflow.com/questions/8790752 / ...
— BoatCode
526

jQuery .scrollTo () метод

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 : рядок, який вказує, яку функцію послаблення використовувати для переходу.

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

— Тимофій Перес
джерело
2
Він працював до недавнього оновлення хрому. У мене є версія, яка працює в даний час, я використовую на 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 JavaScript, а не елемент DOM JQuery.

— Атхарва
джерело
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-адресі знайдеться хеш-тег, scrollT анімує ідентифікатор. Якщо хеш-тегу не знайдено, ігноруйте сценарій.

— Warface
джерело
$(window.location.hash)не працюватимуть для хешів, які не відповідають вимогам ідентифікації виразного ідентифікатора jQuery. Наприклад, хеші, що містять числа. Це також трохи небезпечно; формат введення повинен бути підтверджений, щоб ви не закінчилися з вибором іншого елемента.
— dchacke
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>
Розгорніть фрагмент

— Давидкондей
джерело
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();

— Резгар Кадро
джерело
21

Це так, як я це роблю.

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.
— OG Sean
20

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

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

Редагувати: Пройшло два роки, і я все ще випадково отримую репутацію від цієї посади lmao

— GameMaster1928
джерело
18

Якщо ви обробляєте лише прокрутку до елемента введення, ви можете використовувати focus(). Наприклад, якщо ви хочете прокрутити до першого видимого вводу:

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

Або перший видимий вхід у контейнері з класом .error:

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

Дякуємо Tricia Ball за вказівку на це!

— Бенджамін Оукс
джерело
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;в кінці події натискання, щоб не допустити дії за замовчуванням - негайно прокручування до якоря.
— roncli
2
@roncli Хороший момент - альтернативно можна просто зробитиe.preventDefault();
— Джонатан
e.preventDefault()однак не оновлює хеш у URL-адресі при натисканні, його завжди URL-адреса без хешу
— jayasurya_j
8

У більшості випадків найкраще використовувати плагін. Серйозно. Я збираюся тут прокладати моє . Звичайно, є й інші. Але будь ласка, перевірте, чи справді вони уникають підводних каменів, для яких ви хочете в першу чергу плагін - не всі вони.

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

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

погано UX.

  • Анімація не відповідає на дії користувача. Він працює, навіть якщо користувач натискає, торкається або намагається прокрутити.

  • Якщо початкова точка анімації близька до цільового елемента, анімація болісно повільна.

  • Якщо цільовий елемент розміщено внизу сторінки, він не може прокручуватися до верхньої частини вікна. Анімація прокрутки тут різко зупиняється, в середині руху.

Щоб вирішити ці проблеми (і купу інших ), ви можете використовувати плагін mine, jQuery.scrollable . Потім дзвінок стає

$( window ).scrollTo( targetPosition );

і це все. Звичайно, варіантів більше .

Що стосується цільової позиції, то $target.offset().topце робить завдання в більшості випадків. Але врахуйте, що повернене значення не враховує межі htmlелемента ( див. Цю демонстрацію ). Якщо вам потрібно, щоб цільове положення було точним за будь-яких обставин, краще скористатися

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

Це працює, навіть якщо встановлено межу для htmlелемента.

— хеш-обмін
джерело
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
}
— ФАджир
джерело
7

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

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
— Іршад Хан
джерело
6

Це мій підхід, підсумовуючи ідентифікатори та href's, використовуючи загальний селектор класів

$(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>
Розгорніть фрагмент

— васкогаспар
джерело
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);
};
— кайз1
джерело
4

$('html, body').animate(...) не для мене на iphone, android chrome safari browser.

Мені довелося націлити елемент кореневого вмісту сторінки.

$ ('# 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

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
— Шахдат
джерело
Ви дійсно не повинні використовувати нюхання агента користувача. webaim.org/blog/user-agent-string-history
— Алекс Підворний
Додати слом-перерва: break-all; до вашого елемента CSS, який зазнає проблем. Веб-перегляд Android / iOS jQuery.animate ({scrollTop: y}) Позиція невірна. medium.com/@ellery.leung/…
— daliaessam
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>
— Халед.К
джерело
3

Я встановив модуль прокрутки-елемент 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);
};
— ісапір
джерело
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);
— Polaris
джерело
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'});

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

— Каміль Київчевський
джерело
1
це працює чудово!
— jjoselon
1

Оновлена ​​відповідь станом на 2019 рік:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
— stardust4891
джерело
Вам слід цей селектор для тіла: [document.documentElement, document.body] І Не потрібно зміщення тіла в рівнянні. $ ('# тема'). offset (). верх вистачає.
— ali6p
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.