jQuery выделите элемент

Question

У меня есть 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 по умолчанию.

Answer 1

В большинстве случаев лучше всего использовать плагин. Шутки в сторону. Я собираюсь рассказать здесь . Конечно, есть и другие. Но, пожалуйста, проверьте, действительно ли они избегают ловушек, для которых вам нужен плагин - не все из них.

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

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

плохой UX.

• Анимация не реагирует на действия пользователя. Это продолжается, даже если пользователь нажимает, касается или пытается прокрутить.

• Если начальная точка анимации близка к целевому элементу, анимация мучительно медленная.

• Если целевой элемент находится в нижней части страницы, его нельзя прокрутить до верхней части окна. Анимация прокрутки внезапно останавливается в середине движения.

Для решения этих проблем (и куча других ), вы можете использовать мой плагин, jQuery.scrollable . Звонок становится

$( window ).scrollTo( targetPosition );

и все. Конечно, есть больше опций .

Что касается целевой позиции, $target.offset().top выполняет работу в большинстве случаев. Но учтите, что возвращаемое значение не учитывает границы элемента html ( см. Эту демонстрацию ). Если вам нужно, чтобы целевая позиция была точной при любых обстоятельствах, лучше использовать

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

Это работает, даже если установлена ​​граница для элемента html.

Answer 2

Очень простой и легкий в использовании пользовательский плагин 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>

Answer 3

Анимации:

// 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
  });  
});

Answer 4

Это мой подход к абстракции идентификаторов и ссылок с использованием универсального селектора классов

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

Answer 5

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

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

Answer 6

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

Answer 7

Это то, как я это делаю.

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>

Документы

Answer 8

Если вы хотите выполнить прокрутку в контейнере переполнения (вместо ответа $('html, body'), отвеченного выше), работая также с абсолютным позиционированием, это способ сделать:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

Answer 9

$('html, body').animate(...) не для меня на iphone, Android Chrome Safari браузер.

Мне нужно было настроить таргетинг на корневой элемент содержимого страницы.

$ ('# cotnent'). Animate (...)

Здесьэто то, что я закончил с

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>

Answer 10

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>