JQuery ব্যবহার করে নির্দিষ্ট আইটেমটিতে কীভাবে স্ক্রোল করবেন?

Question

আমার উল্লম্ব স্ক্রোল বার সহ একটি বড় টেবিল রয়েছে। আমি jQuery / জাভাস্ক্রিপ্ট ব্যবহার করে এই টেবিলের একটি নির্দিষ্ট লাইনে স্ক্রোল করতে চাই।

এটি করার জন্য কি অন্তর্নির্মিত পদ্ধতি রয়েছে?

এখানে খেলতে একটি সামান্য উদাহরণ।

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

Answer 1

মরা সহজ। কোন প্লাগইন প্রয়োজন ।

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​

এখানে একটি কাজের উদাহরণ ।

জন্য ডকুমেন্টেশনscrollTop ।

Comments

ধারকটির যদি একটি স্ক্রোলবার থাকে তবে আপনাকে স্ক্রোলটপ: স্ক্রোলটো.অফসেট () শীর্ষে - ধারক.অফসেট () শীর্ষ +

— ধারক.স্রোলটপ

আপনি window (ডকুমেন্ট)। স্ক্রোলটপ (মান) দিয়ে পুরো উইন্ডোটি স্ক্রোল করতে পারেন - অন্তর্নিহিত জকোয়ারি কোডটি আপনার জন্য ব্রাউজার সমস্যার সমাধান করে।

— ক্রিস মোসচিনি

আপনি যদি scrollToশীর্ষে না থেকে কেন্দ্রিক চান :scrollTo.offset().top - container.offset().top + container.scrollTop() - (container.height()/2)

— মাহন

element.scrollIntoView()- এটিই প্রয়োজনীয়। অ্যানিমেশন মানক করা হয়। বিকাশকারী.মোজিলা.অর্গ.ইন-

— ইউএস

দ্রষ্টব্য কোড ব্লকের একেবারে শেষে একটি "অদৃশ্য" অক্ষর রয়েছে। চরিত্রটি এজ, ক্রোমে অবৈধ বলে বিবেচিত হয়। - একটি অনুলিপি-

— পোস্টার

Answer 2

আমি বুঝতে পেরেছি যে এটি কোনও পাত্রে স্ক্রোলিংয়ের জবাব দেয় না তবে লোকেরা এটি দরকারী বলে মনে করছেন:

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

আমরা এইচটিএমএল এবং বডি উভয়ই নির্বাচন করি কারণ ডকুমেন্ট স্ক্রোলারটি উভয়েই থাকতে পারে এবং কোনটি নির্ধারণ করা কঠিন। আধুনিক ব্রাউজারগুলির জন্য আপনি এড়িয়ে যেতে পারেন $(document.body)।

অথবা, পৃষ্ঠার শীর্ষে যেতে:

$('html,body').animate({scrollTop: 0});

বা অ্যানিমেশন ছাড়াই:

$(window).scrollTop(some_element.offset().top);

অথবা ...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

Comments

হ্যালো @ ইনফেনাসাস আপনি কি আমাকে কাজ করার কারণ হিসাবে কাজ করার উদাহরণ দিতে পারেন? আমি var বিভাগ 2 = $ ('# বিভাগ -2') ব্যবহার করেছি; '(' এইচটিএমএল, বডি ')। অ্যানিমেট ({স্ক্রোলটপ: বিভাগ 2. অফসেট () শীর্ষ});

— dll_onFire

এটি দেখতে দুর্দান্ত - আপনি কি নিশ্চিত যে বিভাগ 2 বিদ্যমান? do কনসোল.লগ (বিভাগ 2.leth); এবং এটি 0 টি নয় তা নিশ্চিত করুন কিছুক্ষণের মধ্যে উদাহরণ তৈরি করবেন।

— ডমিনিক

কেন $('html,body')? তার দরকার কেবল নির্দিষ্ট পাত্রে। স্বীকৃত উত্তর আমার পক্ষে ভাল। আমার জিজ্ঞাসিত প্রশ্নের মতো একই মামলা রয়েছে এবং আপনার উত্তরটি আমার পক্ষে কার্যকর হয়নি।

— পেট্রফ 10

@ পেট্রোফ আশ্চর্যজনকভাবে আমি যখন এটি লিখেছিলাম তখন আমি লক্ষ্য করিনি যে উপাদানটি কোনও স্ক্রোলিং পাত্রে ছিল। আমি আমার উত্তরটি এমনভাবেই ছেড়ে দেব কারণ প্রশ্নগুলির শিরোনামের কারণে লোকেরা এখানে একটি Google অনুসন্ধান থেকে শরীরটি স্ক্রোল করতে আসে

— ডমিনিক

Answer 3

আমি কেভিন এবং অন্যদের সাথে একমত, এর জন্য একটি প্লাগইন ব্যবহার করা অর্থহীন।

window.scrollTo(0, $("#element").offset().top);

Comments

এমন কিছুর জন্য যা একেবারে সহজ হওয়া উচিত আমি অনলাইনে অন্যান্য সমাধানগুলিতে যুগে যুগে কাটিয়েছি, তবে এই সাধারণ একটি লাইনারটি আমার যা প্রয়োজন ঠিক তা করে does

— লরেন্স কোপ

এটি লক্ষ করা উচিত, এই ভাবে পুরো উইন্ডোর জন্য কাজ করে। যদি আপনি ওভারফ্লোযুক্ত সামগ্রীটি স্ক্রোল করতে চান: স্ক্রোল করেন তবে এটি কাজ করবে না।

— জেরেমি

Answer 4

আমি নিজেই তা পরিচালনা করতে পেরেছি। কোনও প্লাগিনের প্রয়োজন নেই। আমার সারাংশ দেখুন :

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

Comments

আপনার এক-লাইনের সারাংশ, অ্যানিমেশন সহ সম্পূর্ণ, আমার যা প্রয়োজন তা হ'ল। ধন্যবাদ!

— স্কট স্মিথ

No need for any plugins?? তবে আপনি jQuery ব্যবহার করুন! এটি বিশাল লাইব্রেরি, এমনকি একটি প্লাগইনও প্রকাশ করছে।

— সবুজ

আমি মনে করি আপনাকে jquery লাইব্রেরি রেফারেন্স ছাড়াও একটি রেফারেন্স যুক্ত করার প্রয়োজন নেই। প্লাস jquery এক ধরনের শিল্প মান। আপনি এটি ব্যবহার করবেন না কেন? এটি jquery ব্যতীত সম্ভবত বেশ কার্যকর, তবে এখনও কাউকে পার্সিং অংশের জন্য প্রচুর কোড লিখতে হবে। এটি অনুভূতি অনুভব করে। এবং এটি কেবল একটি ক্ষুদ্র ডিভাইসে স্ক্রোল করার জন্য পূর্ণ প্লাগইন লিখতে প্রতিবিম্ব অনুভব করেছে।

— লর্ডদার্ক

Answer 5

আপনি scrollIntoView()জাভাস্ক্রিপ্টে পদ্ধতি ব্যবহার করতে পারেন । শুধু দিতেid.scrollIntoView();

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

row_5.scrollIntoView();

Comments

কীভাবে এনিমেট করবেন?

— সবুজ

প্রাণবন্ত করার দরকার নেই। আপনি যখন স্ক্রোলইন্টোভিউ () ব্যবহার করবেন তখন নিয়ন্ত্রণটি স্বয়ংক্রিয়ভাবে স্ক্রোল হয়ে এটিকে দৃশ্যতে প্রদর্শন করতে সক্ষম হবে।

— তামিলেরসি

Answer 6

আপনি jQuery স্ক্রোলটো প্লাগইন প্লাগইন ব্যবহার করতে পারেন :

$('div').scrollTo('#row_8');

Comments

লিঙ্কটি আর উপলভ্য নয়। আপনি কি এটি আপডেট করতে পারেন?

— ভাগ্যবান

Answer 7

ধারকটির কেন্দ্রে উপাদান স্ক্রোল করুন

ধারকটির কেন্দ্রে উপাদান আনতে।

কোডপেনে ডেমো

জাতীয়

function scrollToCenter() {
  var container = $('.container'),
    scrollTo = $('.5');

  container.animate({
    //scrolls to center
    scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
  });
}

এইচটিএমএল

<div class="container">
   <div class="1">
    1
  </div>
  <div class="2">
    2
  </div>
  <div class="3">
    3
  </div>
  <div class="4">
    4
  </div>
  <div class="5">
    5
  </div>
  <div class="6">
    6
  </div>
  <div class="7">
    7
  </div>
  <div class="8">
    8
  </div>
  <div class="9">
    9
  </div>
  <div class="10">
    10
  </div>


</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
  Scroll
</button>

CSS

.container {
  height: 60px;
  overflow-y: scroll;
  width 60px;
  background-color: white;
}

এটি কেন্দ্রের সাথে সঠিক নয় তবে আপনি এটি বৃহত্তর বড় উপাদানগুলিতে সনাক্ত করতে পারবেন না।

Answer 8

আপনি jQuery এবং জাভাস্ক্রিপ্ট দ্বারা স্ক্রোল করতে পারেন মাত্র দুটি উপাদান jQuery এবং এই জাভাস্ক্রিপ্ট কোড প্রয়োজন:

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").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
    }, 1500);
  });
});

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to-id").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
    }, 1500);
  });
});

#pane1 {
  background: #000;
  width: 400px;
  height: 400px;
}

#pane2 {
  background: #ff0000;
  width: 400px;
  height: 400px;
}

#pane3 {
  background: #ccc;
  width: 400px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#pane1" class=" js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane3" class=" js-scroll-to-id">Item 3</a>
  </li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#pane3" class="js-scroll-to-id">Item 1</a>
  </li>
  <li>
    <a href="#pane2" class="js-scroll-to-id">Item 2</a>
  </li>
  <li>
    <a href="#pane1" class="js-scroll-to-id">Item 3</a>
  </li>
</ul>

Answer 9

অন্যেরা যা পোস্ট করেছে তার সংমিশ্রণটি আমি করেছি। এটি সহজ এবং মসৃণ

 $('#myButton').click(function(){
        $('html, body').animate({
            scrollTop: $('#scroll-to-this-element').position().top },
            1000
        );
    });

Comments

@ AnriëtteMyburgh আমি নিশ্চিত না যদি অবস্থান () সমস্ত ব্রাউজারে কার্যকর হয়। এটি কাজ করে কিনা তা আপনি অন্যের মধ্যে চেষ্টা করে দেখেছেন? অথবা আপনি যে কোডটি ব্যবহার করছেন তা আমি দেখতে পাচ্ছি এবং দেখতে চাই যে সেখানে অন্য কিছু আছে?

— নিলসকোট

Answer 10

জাভাস্ক্রিপ্ট scrollToকার্যক্রমে অন্তর্নির্মিত হওয়ার কারণে কেউ কেন স্পষ্ট বলে না তা নিশ্চিত নন :

scrollTo( $('#element').position().top );

রেফারেন্স ।

Comments

স্ক্রোলটোতে দুটি আর্গুমেন্ট দরকার, আপনি কেবল একটিতে লিখেছেন।

— নিউক্লিয়ারপিয়ন

... এবং এটি উইন্ডো অবজেক্টে ডাকা হয়।

— হ্যাশচেঞ্জ

Answer 11

তাদেরকে এখানে মানুষ কি ইঙ্গিত করা হয় পক্ষান্তরে আমি তোমাদের বলতে চাই না একটি প্লাগইন ব্যবহার করেন আপনি পদক্ষেপ সজীব করতে চাই। মসৃণ ব্যবহারকারীর অভিজ্ঞতার জন্য কেবল অ্যানিমেটেড স্ক্রোলটপই যথেষ্ট নয়। যুক্তির জন্য এখানে আমার উত্তর দেখুন ।

আমি কয়েক বছর ধরে অনেকগুলি প্লাগইন চেষ্টা করেছি, তবে শেষ পর্যন্ত একটি নিজে লিখেছি। আপনি এটি একটি স্পিন দিতে চাইতে পারেন: jQuery.scrollable । এটি ব্যবহার করে, স্ক্রোল অ্যাকশন হয়ে যায়

$container.scrollTo( targetPosition );

কিন্তু এখানেই শেষ নয়. আমাদের লক্ষ্য অবস্থানও ঠিক করতে হবে। অন্যান্য জবাবগুলিতে আপনি যে গণনাটি দেখছেন,

$target.offset().top - $container.offset().top + $container.scrollTop()

বেশিরভাগ কাজ করে তবে সম্পূর্ণ সঠিক নয়। এটি স্ক্রোল ধারকটির সীমানা সঠিকভাবে পরিচালনা করে না। লক্ষ্য উপাদানটি সীমানার আকার দ্বারা খুব বেশি উপরে উপরে স্ক্রোল করা হয়। এখানে একটি ডেমো রয়েছে।

অতএব, লক্ষ্য অবস্থান গণনা করার একটি ভাল উপায়

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

আবার ডেমোটিকে কার্যত দেখতে দেখুন।

কোনও ফাংশনের জন্য যা লক্ষ্য অবস্থানটি দেয় এবং উইন্ডো এবং নন-উইন্ডো স্ক্রোল পাত্রে উভয়ের জন্যই কাজ করে, এই सारটিটি নির্বিঘ্নে ব্যবহার করুন । সেখানে মন্তব্যগুলি অবস্থান কীভাবে গণনা করা হয় তা ব্যাখ্যা করে।

শুরুতে, আমি বলেছি যে অ্যানিমেটেড স্ক্রোলিংয়ের জন্য একটি প্লাগইন ব্যবহার করা ভাল । আপনার কোনও প্লাগইন লাগবে না, তবে যদি আপনি কোনও সংকেত ছাড়াই লক্ষ্যটিতে যেতে চান। এর জন্য @ জেমসের উত্তর দেখুন , তবে নিশ্চিত করুন যে ধারকটির চারপাশে কোনও সীমানা থাকলে আপনি লক্ষ্য অবস্থানটি সঠিকভাবে গণনা করেছেন।

Answer 12

এটির মূল্য কী, তার জন্য আমি কোনও সাধারণ উপাদানের জন্য এমন আচরণ অর্জন করতে সক্ষম হয়েছি যা কোনও ডিআইভির ভিতরে স্ক্রোলিং সহ থাকতে পারে (ধারকটি না জেনে)

এটি লক্ষ্য উপাদানটির উচ্চতার একটি নকল ইনপুট তৈরি করে এবং তারপরে এটিতে একটি ফোকাস দেয় এবং ব্রাউজারটি আপনি যতগুলি স্ক্রোলযোগ্য শ্রেণিবদ্ধের মধ্যেই থাকুক না কেন বাকি বিষয়গুলি যত্ন নেবে। একটি যাদুমন্ত্র মত কাজ করে.

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

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

Answer 13

আমি এই সমন্বয় করেছি। এটা আমার জন্য কাজ। তবে একটি সমস্যার মুখোমুখি হলে ক্লিক করুন সরানোর জন্য ডিভের আকারটি অনেক বড় যে দৃশ্যগুলি এই বিশেষ ডিভের নিচে না গিয়ে স্ক্রোল করুন।

 var scrollDownTo =$("#show_question_" + nQueId).position().top;
        console.log(scrollDownTo);
        $('#slider_light_box_container').animate({
            scrollTop: scrollDownTo
            }, 1000, function(){
        });

        }