Як прокрутити вікно за допомогою функції JQuery $ .scrollTo ()

98

Я намагаюся прокручувати вниз 100 пікс кожного разу, коли користувач наближається до верхньої частини документа.

У мене функція виконується, коли користувач наближається до верхньої частини документа, але функція .scrollTo не працює.

Я надсилаю попередження після та перед тим, щоб перевірити, чи справді це була лінія чи ні, що зупиняє її, і лише перше сповіщення відключається, ось код:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Я знаю, що у мене сторінка jquery належним чином пов’язана, тому що я використовую багато інших функцій jquery у всьому, і всі вони добре працюють. Я також намагався видалити 'px' зверху, і, схоже, це не має ніякого значення.

3

Сам Jquery мій працює нормально, але ви впевнені, що плагін scrollTo правильно пов’язаний? Змініть одне з цих сповіщень для попередження ($. ScrollTo);

— Андрій

97

Якщо це не працює, чому б не спробувати скористатися методом scrollTop jQuery?

$("#id").scrollTop($("#id").scrollTop() + 100);

Якщо ви хочете плавно прокручувати, ви можете скористатися базовою функцією JavaScript setTimeout / setInterval, щоб змусити її прокручуватися з кроком 1 піксель протягом встановленого проміжку часу.

— Фермін
джерело

8

Зверніть увагу, якщо ви хочете прокрутити всю сторінку, а не окремий елемент, використовуйте $ ('html, body') так, як Тім вказав тут. Просто $ ('body') працюватиме не у всіх браузерах.

— я--

321

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

— Міхай
джерело

19

Я часто замислювався, чому люди використовують 'html, body' для scrollTop замість просто 'html'. Будь-які думки з цього приводу?

— Скотт Грінфілд

+1 працював на мене;) Мені також цікаво знати, чому html, bodyзамість просто html?

— Като

9

@ScottGreenfield, @Kato: не впевнений, чому, але цей коментар говорить, що не враховує bodyце на Chrome 4: stackoverflow.com/questions/1890995/…

— Yuji 'Tomita' Tomita

scrollTop: 0також добре працює. Але тривалість знижується.

— Добре

Це хороше рішення, поки ви не захочете додати повний метод - він буде виконуватися двічі. Рішення @complistic є більш елегантним, і це запобіжить.

— планкуй

41

jQuery тепер підтримує scrollTop як змінну анімації.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Вам більше не потрібно встановлювати Timeout / setInterval, щоб плавно прокручувати.

— Тодд
джерело

Отримали деякі синтаксичні помилки - пропущено закриття {. Інакше це хороший момент.

— Джошуа

1

Чи має бути $("#id").offset().topзамість цього?

— codeulike

15

Щоб обійти проблему htmlvs body, я вирішив це, не анімувавши css безпосередньо, а закликаючи window.scrollTo();кожен крок:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Це чудово працює без жодних оновлень, оскільки використовується перехресний браузер JavaScript.

Перегляньте http://james.padolsey.com/javascript/fun-with-jquerys-animate/ для отримання додаткової інформації про те, що можна зробити з функцією анімації jQuery.

— комплістний
джерело

1

Це геніально. Я змінився лише window.pageYOffsetна $(window).scrollTop()та, window.scrollTo(0, val)щоб $(window).scrollTop(val)не турбуватися про сумісність браузера.

— leftclickben

1

Я ніколи не думав передавати об’єкт в такий спосіб анімації jQuery. Стільки можливих застосувань. Це рішення чудове, дякую.

— Synexis

Так, техніка є вагомим внеском. Раніше вирішували проблеми веб-переглядача, використовуючи "window.scrollTo ()" безпосередньо, але це не дозволяє "завершити" зворотній дзвінок, ні обіцянки. Дякую @complistic за це рішення. Також дякую @leftclickben; Я реалізував його варіацію, використовуючи ".scrollTop ()". Крім того, стаття "james.padolsey" за посиланням - це лаконічне, дуже варто прочитати.

— IAM_AL_X

Я думаю, що "window.scrollTo ()" має бути сумісним з усіма сучасними браузерами.

— IAM_AL_X

7

Схоже, у вас синтаксис трохи невірний ... Я припускаю, що виходячи з вашого коду, що ви намагаєтеся прокрутити 100px в 800 мс, якщо так, то це працює (використовуючи scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });

— Алконія
джерело

6

Насправді щось подібне

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

буде добре працювати і підтримувати накладки. Ви також можете легко підтримувати поля - про завершення див. Нижче

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}

— Тім
джерело