javascript - элементу - скроллинг jquery
jQuery прокрутка к элементу (18)
У меня есть этот элемент 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 по умолчанию для достижения этого.
Когда пользователь нажимает на этот ввод с #subject, страница должна прокручиваться до последнего элемента страницы с хорошей анимацией. Это должен быть свиток вниз и не вверх.
Последний элемент страницы - кнопка отправки с #submit
$('#subject').click(function()
{
$('#submit').focus();
$('#subject').focus();
});
Сначала прокрутите вниз до #submit
затем #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>
Анимации:
// 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
});
});
Для чего это стоит, так мне удалось добиться такого поведения для общего элемента, который может находиться внутри 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();
Если вас мало интересует эффект гладкой прокрутки и просто интересуется прокруткой к определенному элементу, для этого вам не требуется некоторая функция jQuery. У Javascript есть ваше дело:
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
Итак, все, что вам нужно сделать, это: $("selector").get(0).scrollIntoView();
.get(0)
используется, потому что мы хотим получить элемент DOM JavaScript, а не элемент DOM JQuery.
Если вы хотите прокрутить в контейнере переполнения (вместо $('html, body')
указан выше), работая также с абсолютным позиционированием, это способ:
var elem = $('#myElement'),
container = $('#myScrollableContainer'),
pos = elem.position().top + container.scrollTop() - container.position().top;
container.animate({
scrollTop: pos
}
Используя этот простой скрипт
if($(window.location.hash).length > 0){
$('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}
Сделал бы в сортировке, что если в URL-адресе обнаружен хэш-тег, scrollTo анимирует его ID. Если не найден хэш-тег, то игнорируйте скрипт.
Легкий способ достижения прокрутки страницы для целевого div id
var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
Очень простой и простой в использовании пользовательский плагин jQuery. Просто добавьте атрибут scroll=
в свой элемент clickable и установите его значение для селектора, который вы хотите прокрутить.
Например: <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>
Проверьте плагин ScrollTo . Здесь вы можете увидеть демо.
Я надеюсь, что это помогает.
Решение Стива и Питера работает очень хорошо.
Но в некоторых случаях вам может потребоваться преобразовать значение в целое число. Странно, возвращаемое значение от $("...").offset().top
иногда находится в float
.
Использовать: parseInt($("....").offset().top)
Например:
$("#button").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#elementtoScrollToID").offset().top)
}, 2000);
});
Чтобы показать полный элемент (если это возможно с текущим размером окна):
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);
Это мой подход, абстрагирующий идентификаторы и 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>
Это сработало для меня:
var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
Я написал функцию общего назначения, которая прокручивает объект 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);
};
Я написал этот легкий плагин, чтобы упростить прокрутку страницы / элемента. Он является гибким, где вы можете пройти в целевом элементе или заданном значении. Возможно, это может стать частью официального официального выпуска 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 : Строка или число, определяющее, как долго будет выполняться анимация.
easing : Строка, указывающая, какую функцию ослабления использовать для перехода.
complete : функция для вызова после завершения анимации.
$('html, body').animate(...)
не для меня на iphone, браузере браузера Chrome Chrome.
Мне нужно было настроить целевой элемент контента на странице.
$ ( '# 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>
$('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);
var scrollTo = function($parent, $element) {
var topDiff = $element.position().top - $parent.position().top;
$parent.animate({
scrollTop : topDiff
}, 100);
};