javascript - jquery w3schools




jQuery স্ক্রোল উপাদান (18)

আমি এই input উপাদান আছে:

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

তারপরে আমার অন্য কিছু উপাদান রয়েছে, যেমন অন্যান্য পাঠ্য ইনপুট, টেক্সটেরিয়াস ইত্যাদি।

যখন ব্যবহারকারী #subject সাথে সেই #subject ক্লিক করে, পৃষ্ঠার পৃষ্ঠার শেষ উপাদানটিতে একটি চমৎকার অ্যানিমেশনের সাথে স্ক্রোল করা উচিত। এটা নীচে একটি স্ক্রল এবং শীর্ষ না হওয়া উচিত।

পৃষ্ঠার সর্বশেষ আইটেম #submit দিয়ে একটি submit বোতাম:

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

অ্যানিমেশন খুব দ্রুত না হওয়া উচিত এবং তরল হওয়া উচিত।

আমি সর্বশেষ jQuery সংস্করণ চলমান করছি। আমি কোন প্লাগইন ইনস্টল করতে পছন্দ করি না কিন্তু এটি অর্জন করতে ডিফল্ট jQuery বৈশিষ্ট্যগুলি ব্যবহার করতে পছন্দ করি।


যখন ব্যবহারকারী # ইনজেক্টের সাথে সেই ইনপুটটিতে ক্লিক করে, পৃষ্ঠার পৃষ্ঠার শেষ উপাদানটিতে একটি চমৎকার অ্যানিমেশনের সাথে স্ক্রোল করা উচিত। এটা নীচে একটি স্ক্রল এবং শীর্ষ না হওয়া উচিত।

পৃষ্ঠার শেষ আইটেম # জমা দিয়ে একটি জমা বোতাম

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

এটি প্রথমে #submit দেওয়ার জন্য নিচে স্ক্রোল করবে তারপর ক্লিক করা যে #submit কার্সারটি পুনঃস্থাপন করবে, যা একটি স্ক্রোল ডাউন করবে এবং সর্বাধিক ব্রাউজারগুলিতে কাজ করবে। এটি জাভাস্ক্রিপ্ট প্রয়োজন হয় না কারণ এটি বিশুদ্ধ জাভাস্ক্রিপ্টে লেখা যেতে পারে।

চেন্নাই 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>

"অ্যানিমেশন" সমাধান একটি কম্প্যাক্ট সংস্করণ।

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

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

বেসিক ব্যবহার: $('#your_element').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
  });  
});

আপনি আইডি button সহ একটি বোতাম আছে অনুমান, এই উদাহরণটি চেষ্টা করুন:

$("#button").click(function() {
    $([document.documentElement, document.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>


আমি একটি মডিউল 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 }
}

আমি একটি সাধারণ উদ্দেশ্য ফাংশন লিখেছিলাম যা একটি 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);
};

এটা আমার জন্য কাজ করেছে:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

এটি Atharva এর উত্তর থেকে: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView । আপনার দস্তাবেজ একটি আইফ্রেমে থাকলে কেবল যোগ করতে চেয়েছিলেন, আপনি পটভূমিতে ফ্রেম দেখতে একটি উপাদান নির্বাচন করতে পারেন:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

কাস্টম 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>


যদি আপনি মসৃণ স্ক্রোল প্রভাবতে বেশি আগ্রহী না হন এবং কোনও নির্দিষ্ট উপাদানতে স্ক্রলিংয়ে আগ্রহী হন, তবে এর জন্য আপনাকে কিছু jQuery ফাংশন প্রয়োজন হবে না। জাভাস্ক্রিপ্ট আপনার ক্ষেত্রে আচ্ছাদিত হয়েছে:

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

তাই আপনাকে যা করতে হবে তা হল: $("selector").get(0).scrollIntoView();

.get(0) ব্যবহার করা হয় কারণ আমরা জাভাস্ক্রিপ্টের DOM উপাদানটি পুনরুদ্ধার করতে চাই এবং JQuery এর DOM উপাদানটি পুনরুদ্ধার করতে চাই না।


যদি আপনি শুধুমাত্র একটি ইনপুট উপাদান স্ক্রোলিং পরিচালনা করছেন, তবে আপনি focus() ব্যবহার করতে পারেন। উদাহরণস্বরূপ, যদি আপনি প্রথম দৃশ্যমান ইনপুট স্ক্রোল করতে চান:

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

অথবা ক্লাসের সাথে একটি ধারক মধ্যে প্রথম দৃশ্যমান ইনপুট। .error :

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

এই নির্দেশক জন্য Tricia বল ধন্যবাদ!


স্টিভ এবং পিটার দ্বারা সমাধান খুব ভাল কাজ করে।

কিন্তু কিছু ক্ষেত্রে, আপনাকে মানটিকে পূর্ণসংখ্যাতে রূপান্তর করতে হতে পারে। অদ্ভুতভাবে, $("...").offset().top থেকে ফেরত মান $("...").offset().top কখনও কখনও float
ব্যবহার করুন: parseInt($("....").offset().top)

উদাহরণ স্বরূপ:

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

jQuery। স্ক্রোলটো ():

পৃষ্ঠা / উপাদান স্ক্রোলিং আরও সহজ করতে আমি এই লাইটওয়েট প্লাগইনটি লিখেছি। আপনি একটি লক্ষ্য উপাদান বা নির্দিষ্ট মান পাস করতে পারে যেখানে এটি নমনীয়। সম্ভবত এটি 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 : স্ক্রোল লক্ষ্য উপরে অতিরিক্ত স্পেসিং নির্ধারণ করে একটি সংখ্যা।

সময়কাল : অ্যানিমেশন কতক্ষণ চলবে তা নির্ধারণ করে একটি স্ট্রিং বা সংখ্যা।

সহজ : সংকোচনের জন্য ব্যবহার করা যা ফাংশন সহজ যা ইঙ্গিত একটি স্ট্রিং।

সম্পূর্ণ : অ্যানিমেশনের একবার কল করার জন্য একটি ফাংশন।


এই সমাধানটির সাহায্যে আপনার কোনও প্লাগইন দরকার নেই এবং আপনার বন্ধ করা </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 হ্যাশ সহ a লিঙ্ক ক্লিক করেন যেমন #top , আমরা এটিতে স্ক্রোল করি।


$('html, body').animate(...) আইফোন, অ্যান্ড্রয়েড ক্রোম সাফারি ব্রাউজারে আমার জন্য নয়।

আমি পাতা মূল উপাদান উপাদান লক্ষ্য করা ছিল।

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

সমস্ত শরীরের সামগ্রী একটি # উপাদান DIV সঙ্গে তারযুক্ত

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

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

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

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