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




(20)

मेरे पास यह 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 सुविधाओं का उपयोग करना पसंद करता हूं।


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

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


जब उपयोगकर्ता #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>

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

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

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

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

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

ज्यादातर मामलों में, प्लगइन का उपयोग करना सबसे अच्छा होगा। गंभीरता से। मैं यहाँ मेरा टाउट करने जा रहा हूं। बेशक कुछ भी हैं। लेकिन कृपया जांचें कि क्या वे वास्तव में उन नुकसानों से बचते हैं जिनके लिए आप पहली जगह प्लगइन चाहते हैं - उनमें से सभी नहीं।

मैंने elsewhere प्लगइन का उपयोग करने के कारणों के बारे में लिखा elsewhere । संक्षेप में, एक लाइनर यहां सबसे अधिक जवाब दे रहा है

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

खराब यूएक्स है।

  • एनीमेशन उपयोगकर्ता क्रियाओं का जवाब नहीं देता है। यह तब भी चलता है जब उपयोगकर्ता स्क्रॉल करने के लिए क्लिक करता है, टैप करता है या कोशिश करता है।

  • यदि एनीमेशन का प्रारंभिक बिंदु लक्ष्य तत्व के करीब है, तो एनीमेशन दर्दनाक रूप से धीमा है।

  • यदि लक्ष्य तत्व पृष्ठ के निचले भाग के पास रखा गया है, तो इसे विंडो के शीर्ष पर स्क्रॉल नहीं किया जा सकता है। स्क्रॉल एनीमेशन अचानक गति से, मध्य गति में बंद हो जाता है।

इन मुद्दों को संभालने के लिए (और elsewhere ), आप मेरा प्लगइन का उपयोग कर सकते हैं, jQuery.scrollable । तब कॉल बन जाता है

$( window ).scrollTo( targetPosition );

और बस। बेशक, और विकल्प हैं

लक्ष्य स्थिति के संबंध में, $target.offset().top पर ज्यादातर मामलों में नौकरी होती है। लेकिन कृपया ध्यान रखें कि लौटाया गया मूल्य html तत्व पर एक सीमा नहीं लेता है ( इस डेमो को देखें )। यदि आपको किसी भी परिस्थिति में सटीक होने की लक्ष्य स्थिति की आवश्यकता है, तो इसका उपयोग करना बेहतर है

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

यह तब भी काम करता है जब html तत्व पर एक सीमा सेट हो।


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

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

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

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

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 : एक तत्व, स्ट्रिंग, या संख्या जो वांछित स्क्रॉल स्थिति इंगित करता है।

ऑफसेट टॉप : एक संख्या जो स्क्रॉल लक्ष्य के ऊपर अतिरिक्त अंतर को परिभाषित करती है।

अवधि : एक स्ट्रिंग या संख्या यह निर्धारित करती है कि एनीमेशन कितनी देर तक चलेंगे।

आसान : एक स्ट्रिंग जो इंगित करती है कि संक्रमण के लिए किस आसान कार्य का उपयोग करना है।

पूर्ण : एनीमेशन पूर्ण होने के बाद कॉल करने के लिए एक फ़ंक्शन।


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>


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

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

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

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


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

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

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

मूल उपयोग: $('#your_element').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>

यदि आप केवल इनपुट तत्व पर स्क्रॉलिंग कर रहे हैं, तो आप focus() उपयोग कर सकते हैं। उदाहरण के लिए, यदि आप पहले दृश्य इनपुट में स्क्रॉल करना चाहते हैं:

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

या कक्षा के साथ एक कंटेनर में पहला दृश्य इनपुट। .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
}

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

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

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


मान लें कि आपके पास आईडी 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>


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

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

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


एनिमेशन:

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




jquery