javascript - तत्व के लिए jQuery स्क्रॉल




(16)

जब उपयोगकर्ता #subject के साथ उस इनपुट पर क्लिक करता है, तो पेज को पृष्ठ के अंतिम तत्व को एक अच्छी एनीमेशन के साथ स्क्रॉल करना चाहिए। यह नीचे स्क्रॉल होना चाहिए और शीर्ष पर नहीं होना चाहिए।

पृष्ठ का अंतिम आइटम # सबमिट के साथ एक सबमिट बटन है

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

यह पहले #submit करने के लिए नीचे स्क्रॉल करेगा, फिर कर्सर को उस इनपुट पर वापस बहाल करें जिसे क्लिक किया गया था, जो स्क्रॉल की नकल करता है, और अधिकांश ब्राउज़रों पर काम करता है। इसे jQuery की आवश्यकता नहीं है क्योंकि इसे शुद्ध जावास्क्रिप्ट में लिखा जा सकता है।

focus कॉल के माध्यम से, 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>

https://code.i-harness.com

मेरे पास यह input तत्व है:

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

तब मेरे पास कुछ अन्य तत्व हैं, जैसे कि अन्य टेक्स्ट इनपुट, टेक्स्टारे आदि।

जब उपयोगकर्ता #subject साथ उस input पर क्लिक करता है, तो पेज को पृष्ठ के अंतिम तत्व को एक अच्छी एनीमेशन के साथ स्क्रॉल करना चाहिए। यह नीचे स्क्रॉल होना चाहिए और शीर्ष पर नहीं होना चाहिए।

पृष्ठ का अंतिम आइटम # submit साथ एक submit बटन है:

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

एनीमेशन बहुत तेज़ नहीं होना चाहिए और तरल होना चाहिए।

मैं नवीनतम jQuery संस्करण चला रहा हूँ। मैं किसी भी प्लगइन को स्थापित करना पसंद नहीं करता लेकिन इसे प्राप्त करने के लिए डिफ़ॉल्ट jQuery सुविधाओं का उपयोग करना पसंद करता हूं।


"एनिमेट" समाधान का एक कॉम्पैक्ट संस्करण।

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

मूल उपयोग: $('#your_element').scrollTo();


इस सरल लिपि का उपयोग करना

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

इस तरह से बना होगा कि यदि यूआरएल में हैश टैग मिलता है, तो स्क्रॉल को आईडी पर एनिमेट करने के लिए। यदि हैश टैग नहीं मिला है, तो स्क्रिप्ट को अनदेखा करें।


इसके लायक होने के लिए, इस तरह मैं एक सामान्य तत्व के लिए इस तरह के व्यवहार को प्राप्त करने में कामयाब रहा जो स्क्रॉलिंग के साथ एक डीआईवी के अंदर हो सकता है। हमारे मामले में हम पूरे शरीर को स्क्रॉल नहीं करते हैं, लेकिन अतिप्रवाह वाले विशेष तत्व: ऑटो; एक बड़े लेआउट के भीतर।

यह लक्ष्य तत्व की ऊंचाई का नकली इनपुट बनाता है, और उसके बाद इसे ध्यान केंद्रित करता है, और ब्राउजर बाकी के बारे में परवाह करेगा चाहे आप स्क्रॉल करने योग्य पदानुक्रम के भीतर कितना गहरा हो। एक जादू की तरह काम करता है।

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 प्लगइन का उपयोग करने के लिए बहुत आसान और आसान है। बस अपने क्लिक करने योग्य तत्व में विशेषता 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>

जेनेरिक क्लास चयनकर्ता का उपयोग करते हुए यह मेरा दृष्टिकोण आईडी और 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>


पूर्ण तत्व दिखाने के लिए (यदि वर्तमान विंडो आकार के साथ यह संभव है):

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

मान लें कि आपके पास आईडी button , इस उदाहरण को आजमाएं:

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

मुझे आलेख से कोड मिला है जो एक jQuery प्लगइन के बिना चिकनी रूप से किसी तत्व पर स्क्रॉल करता है । और मैंने इसे नीचे दिए गए उदाहरण पर परीक्षण किया है।

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


मैंने एक सामान्य उद्देश्य फ़ंक्शन लिखा जो या तो jQuery ऑब्जेक्ट, एक सीएसएस चयनकर्ता, या संख्यात्मक मान तक स्क्रॉल करता है।

उदाहरण का उपयोग:

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

यदि आप ओवरफ्लो कंटेनर (ऊपर दिए गए $('html, body') बजाय स्क्रॉल करना चाहते हैं, तो पूर्ण स्थिति के साथ भी काम करना, यह करने का तरीका है:

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

container.animate({
  scrollTop: pos
}

यदि आप चिकनी स्क्रॉल प्रभाव में बहुत रुचि नहीं रखते हैं और किसी विशेष तत्व पर स्क्रॉल करने में रुचि रखते हैं, तो इसके लिए आपको कुछ jQuery फ़ंक्शन की आवश्यकता नहीं है। जावास्क्रिप्ट को आपका केस कवर किया गया है:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

तो आपको बस इतना करना है: $("selector").get(0).scrollIntoView();

.get(0) का उपयोग किया जाता है क्योंकि हम जावास्क्रिप्ट के DOM तत्व को पुनर्प्राप्त करना चाहते हैं, न कि JQuery के DOM तत्व।


स्टीव और पीटर का समाधान बहुत अच्छा काम करता है।

लेकिन कुछ मामलों में, आपको मान को एक पूर्णांक में परिवर्तित करना पड़ सकता है। आश्चर्यजनक रूप से, $("...").offset().top से लौटा हुआ मूल्य $("...").offset().top कभी-कभी float
उपयोग करें: parseInt($("....").offset().top)

उदाहरण के लिए:

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

ScrollTo प्लगइन देखें। आप डेमो देख सकते हैं।

मुझे उम्मीद है यह मदद करेगा।


इस समाधान के साथ आपको किसी भी प्लगइन की आवश्यकता नहीं है और आपके बंद होने से पहले स्क्रिप्ट को रखने के अलावा कोई सेटअप आवश्यक नहीं है </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 साथ a लिंक पर क्लिक करते हैं, तो हम इसे स्क्रॉल करते हैं।


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