javascript - jQuery انتقل إلى عنصر



12 Answers

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 : رقم يحدد المسافات الإضافية فوق هدف التمرير.

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

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

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

Question

لدي عنصر 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 الافتراضية لتحقيق ذلك.




تحقق من المكون الإضافي ScrollTo . يمكنك رؤية العرض .

اتمني ان يكون مفيدا.




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

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

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




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

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

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

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

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




باستخدام هذا الحل ، لن تحتاج إلى أي مكون إضافي ولا يتطلب إعدادًا إلى جانب وضع النص البرمجي قبل علامة الإغلاق </body> .

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

عند التحميل ، إذا كان هناك تجزئة في العنوان ، فإننا نقوم بالتمرير إليه.

و- عندما تنقر على رابط به تجزئة href سبيل المثال #top ، ننتقل إليه.




هذا هو النهج الخاص بي المستخلص من المعرف و 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 مخصص. ما عليك سوى إضافة 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>



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

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



عندما ينقر المستخدم على هذا الإدخال مع #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>



$('html, body').animate(...) لا بالنسبة لي على iphone، android chrome safari browser.

اضطررت إلى استهداف عنصر محتوى أساسي في الصفحة.

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



أقوم بإعداد 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 }
}



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

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

container.animate({
  scrollTop: pos
}



Related