javascript - ماهو - تحميل مكتبة jquery




jQuery انتقل إلى عنصر (16)

عندما ينقر المستخدم على هذا الإدخال مع #subject ، يجب أن تنتقل الصفحة إلى آخر عنصر في الصفحة مع رسم متحرك لطيف. يجب أن يكون التمرير إلى الأسفل وليس إلى الأعلى.

العنصر الأخير من الصفحة هو زر إرسال مع #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

سينتقل هذا أولاً إلى #submit ثم يعيد المؤشر إلى الإدخال الذي تم النقر عليه ، والذي يحاكي التمرير لأسفل ، ويعمل على معظم المتصفحات. لا يتطلب أيضًا jQuery لأنه يمكن كتابتها في جافا سكريبت خالص.

يمكن لهذه الطريقة من استخدام وظيفة 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>

لدي عنصر input هذا:

<input type="text" class="textfield" value="" id="subject" name="subject">

ثم لدي بعض العناصر الأخرى ، مثل مدخلات نصية أخرى ، أو نصوص ، إلخ.

عندما ينقر المستخدم على هذا input مع #subject ، يجب أن #subject الصفحة إلى آخر عنصر في الصفحة مع رسم متحرك لطيف. يجب أن يكون التمرير إلى الأسفل وليس إلى الأعلى.

آخر عنصر في الصفحة هو زر submit مع #submit :

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

يجب ألا تكون الرسوم المتحركة سريعة جدًا ويجب أن تكون سريعة.

أقوم بتشغيل أحدث إصدار jQuery. أفضل عدم تثبيت أي مكون إضافي ولكن لاستخدام ميزات jQuery الافتراضية لتحقيق ذلك.


أقوم بإعداد scroll-element npm install scroll-element scroll-element npm install scroll-element . يعمل مثل هذا:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

مكتوبة بمساعدة من المشاركات SO التالية:

هنا هو الرمز:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

إذا كنت تتعامل مع التمرير إلى عنصر إدخال فقط ، فيمكنك استخدام focus() . على سبيل المثال ، إذا كنت تريد التمرير إلى أول إدخال مرئي:

$(':input:visible').first().focus();

أو أول إدخال مرئي في حاوية مع class .error :

$('.error :input:visible').first().focus();

شكرا لتريشيا بول لافتا هذا!


إذا كنت تريد التمرير داخل حاوية تجاوز السعة (بدلاً من $('html, body') الإجابة عليها أعلاه) ، تعمل أيضًا مع الوضع المطلق ، فهذه هي الطريقة للقيام:

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

container.animate({
  scrollTop: pos
}

الحل من قبل ستيف وبيتر يعمل بشكل جيد للغاية.

ولكن في بعض الحالات ، قد تضطر إلى تحويل القيمة إلى عدد صحيح. الغريب ، القيمة المعادة من $("...").offset().top .
الاستخدام: parseInt($("....").offset().top)

فمثلا:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

الرسوم المتحركة:

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

باستخدام هذا البرنامج النصي البسيط

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

سيؤدي ذلك إلى فرز أنه في حالة العثور على علامة التجزئة في عنوان url ، يتم تحريك scrollTo إلى المعرف. إذا لم يتم العثور على علامة تجزئة ، فتجاهل النص البرمجي.


بسيطة جدا وسهلة الاستخدام المساعد 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>

طريقة سهلة لتحقيق التمرير من الصفحة لاستهداف معرف div

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

على ما يستحق ، هذه هي الطريقة التي تمكنت من تحقيق مثل هذا السلوك لعنصر عام يمكن أن يكون داخل 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 أو محدد 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);
};

لإظهار العنصر الكامل (إذا كان من الممكن مع حجم الإطار الحالي):

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 ، باستخدام محدد فئة عام

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


jQuery .scrollTo ():

كتبت هذا البرنامج المساعد خفيف الوزن لجعل الصفحة / عنصر التمرير أسهل بكثير. إنها مرنة حيث يمكنك المرور في عنصر هدف أو قيمة محددة. ربما يمكن أن يكون هذا جزءًا من الإصدار الرسمي القادم لـ 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 : رقم يحدد المسافات الإضافية فوق هدف التمرير.

المدة : سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.

تخفيف : سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.

كاملة : دالة للاتصال بمجرد اكتمال الرسوم المتحركة.


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>


$('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);






jquery