Анимированная прокрутка jQuery

ProgramBox

Анимированная прокрутка jQuery

Post author:admin
Запись опубликована:13 апреля, 2023
Post category:Вопросы по программированию

#jquery #user-interface #scroll #effects

#jquery #пользовательский интерфейс #прокрутка #эффекты

Вопрос:

Я не уверен, как вызвать эффект, но может кто-нибудь указать мне на библиотеку, которая помогла бы мне добиться того же эффекта, что и на этом веб-сайте?

http://www.makr.com

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

Я не уверен, нужно ли мне начинать другую тему, но кто-нибудь может помочь мне с небольшим фрагментом jQuery для достижения полного эффекта пользовательского интерфейса Makr?

1. Я не уверен, нужно ли мне начинать другую тему, но кто-нибудь может помочь мне с небольшим фрагментом jQuery для достижения полного эффекта пользовательского интерфейса Makr?

2. Я дал вам кое-что хорошее для начала. Когда вы нажимаете на элемент, получите смещение от этого элемента и прокрутите до смещения с помощью jQuery animate.

3. да, я получил их, я смог прокрутить их вверх, но у меня возникли проблемы со следующей частью анимации slideDown. я не могу добиться их синхронизации так, как это делает Makr.

4. Вы всегда можете использовать функцию задержки: .delay(1000), чтобы отложить выполнение функции на 1 секунду. api.jquery.com/delay Или установите слайд-шоу в полной функции

Ответ №1:

Вы можете анимировать верхнюю часть страницы с помощью jQuery.

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

Смотрите этот сайт:
http://papermashup.com/jquery-page-scrolling

1. Мне нужно было использовать только #("body").animate(...); , и это сработало для Firefox, Chrome и ie. Есть ли конкретный случай для также прикрепления анимации к html объекту DOM?

2. Часть ‘$ («.middle»).offset().top’ предназначена для получения смещения этого объекта (класс, идентификатор, …), чтобы страница знала, на какую высоту прокручивать. Если вы хотите перейти к определенному разделу, расположенному на полпути страницы, это может быть полезно.

3. $('html, body') предназначен для совместимости с ie8.

4. $(‘html, body’) также предназначен для safari

5. как именно jQuery обеспечивает плавную прокрутку?

Ответ №2:

Вы можете запустить этот простой плагин jQuery (AnimateScroll). Он довольно прост в использовании.

1. Прокрутите страницу до верха:

 $('body').animatescroll();

2. Перейдите к элементу с идентификатором section-1 :

 $('#section-1').animatescroll({easing:'easeInOutBack'});

Отказ от ответственности: Я являюсь автором этого плагина.

Ответ №3:

Я просто использую:

 $('body').animate({ 'scrollTop': '-=-' <yourValueScroll> 'px' }, 2000);

1. можете ли вы объяснить, что вы пытаетесь сделать с ‘-=-‘? вы пытаетесь ввести число или что-то в этомроде?

2. @user151496 Взгляните на документацию jQuery api.jquery.com/animate под абзацем, который в данный момент начинается «Анимированные свойства также могут быть относительными». Точно так же, как в JS вы можете сказать, myVar = 10 чтобы добавить десять к существующему значению, этот фрагмент в основном использует пользовательский синтаксический анализ jQuery для достижения аналогичной цели: scrollTop -= -yourScrollValue . Я не могу точно сказать, почему OP здесь выбрал это вместо более простого {scrollTop: ' = ' value} .

3. @user151496 первый ‘-‘ — это уменьшение значения, а второй ‘-‘ если встречается отрицательное значение, они становятся положительными и противоположными. 🙂

4. я понимаю, что делает -= и -. я просто не знаю, почему бы ему не использовать = вместо:S

5. @user151496 если использовать =, может быть, на случай, если прокрутка пойдет вниз, вместо того, чтобы идти вверх, что он хочет. 🙂

Ответ №4:

 var page_url = windws.location.href;
var page_id = page_url.substring(page_url.lastIndexOf("#")   1);
if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-"   page_id).offset().top
    }, 2000)
} else if (page_id == "") {
    $("html, body").animate({
        scrollTop: $("#scroll-"   page_id).offset().top
    }, 2000)
}

});

Ответ №5:

Для этого есть плагин jquery. Он прокручивает документ до определенного элемента, так что он будет идеально расположен в середине окна просмотра. Он также поддерживает ослабление анимации, чтобы эффект прокрутки выглядел очень плавно. Проверьте AnimatedScroll.js .

1. Я бы не стал использовать подобный плагин, когда реальный ответ поддерживается изначально. $('html,body').animate({scrollTop:x},t); все достаточно правильно, нет необходимости добавлять ненужный плагин на вкладку сети вашей страницы.

2. Вы абсолютно правы, за исключением того, что этот плагин способен прокручивать любой элемент документа так, чтобы он находился точно в середине области просмотра окна.

3. Проблема в том, что это все еще очень просто без каких-либо плагинов. Это просто вопрос прокрутки до ($e.offset().top ($e.height()/2))-($(window).height()/2) , или по-английски, "elementCenter minus halfViewportHeight" . Верно?

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

5. @EugeneTiurin Вы могли бы просто создать пользовательскую функцию, взяв элемент в качестве параметра.