У меня есть элемент 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 для достижения этой цели.
Предполагая, что у вас есть кнопка с id 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>
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: Строка или число, определяющее продолжительность анимации.
сглаживание: Строка, указывающая, какую функцию смягчения использовать для перехода.
complete: Функция, вызываемая по завершении анимации.
Если вас не сильно интересует эффект плавной прокрутки и просто интересующиеся прокрутка к определенной стихии, вы Дон'т требуют некоторые функции jQuery для этого. В JavaScript есть ваш случай:
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
Поэтому все, что вам нужно сделать, это: $("и селектор на").получить(0).scrollIntoView();
.получить(0)
используется потому, что мы хотим получить в JavaScript's в DOM-элемент, а не в jQuery'элемент с дом.
Используя этот простой сценарий
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
Сделает так, что если в url найден хэш-тег, то scrollTo анимируется под ID. Если хэш-тег не найден, то скрипт игнорируется.
в
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>
в
Решение Стив и Питер очень хорошо работает.
Но в некоторых случаях может потребоваться, чтобы преобразовать значение в целое число. Странно, возвращаемое значение от $(" и..." - а).смещение().топ
иногда поплавок
.
Использовать: parseInt($(" и....&и").смещение().сверху)
Например:
$("#button").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#elementtoScrollToID").offset().top)
}, 2000);
});
Компактная версия с "живым" и решение.
$.fn.scrollTo = function (speed) {
if (typeof(speed) === 'undefined')
speed = 1000;
$('html, body').animate({
scrollTop: parseInt($(this).offset().top)
}, speed);
};
Основное использование: $('#your_element').scrollTo();
Если вы не только обработка прокрутки для элемента input, вы можете использовать фокус()
. Например, если вы хотели выделите первые видимые ввода:
$(':input:visible').first().focus();
Или первый видимый вход в контейнер с классом.ошибка:
$('.error :input:visible').first().focus();
Спасибо Триша мяч за указание на это!
С [этого решения](
) вам не нужно любой плагин и там'ы установка не требуется кроме размещения скрипта перед закрывающим в `</тело и GT; тег.$("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);
}
На нагрузку, если есть хэш в свой адрес, то выделите его.
И всякий раз, когда вы щелкните а
с Солар
хэш-например, а
, то выделите его.
Я знаю способ без jQuery:
document.getElementById("element-id").scrollIntoView();
Это, как я это делаю.
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>
в
В большинстве случаев было бы лучше использовать плагин. Серьезно. Я'м собираюсь зазывают мое здесь. Конечно, есть и другие, тоже. Но, пожалуйста, проверьте, если они действительно избежать подводных камней, на которые вы'хочу, чтобы плагин в первую очередь - не все из них.
Я написал о причинах, используя плагин в другом месте. В двух словах, один вкладыш берегоукрепительных большинство ответов здесь
$('html, body').animate( { scrollTop: $target.offset().top }, duration );
плохо УБ.
Анимация не'т отвечать на действия пользователя. Он несет, даже если пользователь нажимает, метчики, или пытается прокрутить.
Если начальная точка анимации близка к целевому элементу, анимация идет крайне медленно.
Если целевой элемент помещен в нижней части страницы, он может'т быть прокручен в верхней части окна. Анимация прокрутки резко останавливается тогда, в середине движения.
Для решения этих вопросов (и несколько), Вы можете использовать плагин мой, в jQuery.прокручивать. Тогда вызов будет
$( window ).scrollTo( targetPosition );
и что's оно. Конечно, есть дополнительные параметры.
С учетом целевой установки, $таргет.смещение().топ
делает работу в большинстве случаев. Но обратите внимание, что возвращаемое значение не'т принять границы на элемент HTML
, не в счет ([посмотреть демо][4]). Если вам нужен целевой позиции, чтобы быть точным при любых обстоятельствах, лучше использовать
targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;
Это работает, даже если граница на HTML
в элемент.
[4]: http://jsbin.com/vifugo/3 " по$Элем.- Яш ОГРН и quot смещения() не учитывает для HTML границы;
Простой способ для достижения прокрутки страницы в целевой див ИД
var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
Если вы хотите прокручивать переполнения контейнера (вместо `$('html-код, тело') - ответила выше), работает также с абсолютным позиционированием, это так надо делать :
var elem = $('#myElement'),
container = $('#myScrollableContainer'),
pos = elem.position().top + container.scrollTop() - container.position().top;
container.animate({
scrollTop: pos
}
Очень простой и легкий в использовании пользовательский плагин jQuery. Просто добавьте атрибут свиток=` на ваш кликабельный элемент и установите его значение на селектор, который вы хотите выбрать.
Как так: <свиток=то" Продукт#" и>нажать Мне</а>
. Он может быть использован на любой элемент.
(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>
Это мой подход, абстрагирование ID и#39;ы и 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>
в
Анимация:
// 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
});
});
`$('html-код, тело').анимировать (...) не для меня на мобильный, андроид, браузер Крома сафари.
Мне пришлось целевых корневой элемент содержания страницы.
$('#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');
}
Все содержимое тело подключено с содержанием #див
<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
Это Атхарва'ы ответа: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView. Просто хотел добавить, если ваш документ в iframe, вы можете выбрать элемент в Родительском рамка для прокрутки в поле зрения:
$('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();