jQuery পৃষ্ঠার নীচে / iframe স্ক্রোল করুন

224

আইফ্রেমে বা পৃষ্ঠার নীচে স্ক্রল করতে আমি কীভাবে jquery ব্যবহার করব?

jquery scroll scrollto

— আদম
সূত্র

360

আপনি যদি একটি দুর্দান্ত ধীর অ্যানিমেশন স্ক্রোল চান তবে এর সাথে যে কোনও অ্যাঙ্কর href="#bottom"আপনাকে নীচে স্ক্রোল করবে:

$("a[href='#bottom']").click(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  return false;
});

নির্বাচক পরিবর্তন করতে নির্দ্বিধায়।

— মার্ক উরসিনো
সূত্র

48

এটি ফায়ারফক্স 3.5.3 এ কাজ করে তবে ক্রোম 4.0.295.0 এ নয়। নিম্নলিখিতটি ক্রোমে কাজ করে: $ ('এইচটিএমএল, দেহ') an

— টম

1

@ টম, আমি আপনার সমাধান এবং মার্কের মধ্যে পার্থক্যটি চিহ্নিত করতে পারি না!

— মুহাম্মদ জেলবানা

4

@ মুহাম্মাদ জেলবানা সম্পাদনার তারিখটি পরীক্ষা করুন। দেখা যাচ্ছে যে মার্ক টমের সমাধান অন্তর্ভুক্ত করার জন্য তার উত্তর আপডেট করেছেন।

— পল পার্কার

আসলে উপাদানটির উচ্চতা পাওয়ার দরকার নেই: স্ট্যাকওভারফ্লো.

— com/a/44578849

210

স্ক্রোলটপ () স্ক্রোলযোগ্য অঞ্চল থেকে পিক্সেলগুলির সংখ্যাটি লুকানো রয়েছে যা তাই দেয়:

$(document).height()

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

$('html, body').animate({ 
   scrollTop: $(document).height()-$(window).height()}, 
   1400, 
   "easeOutQuint"
);

— টম বেটস
সূত্র

29

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, টম একেবারে সঠিক, স্বীকৃত উত্তরটি খুব সুন্দরভাবে কাজ করে না কারণ সহজলোকের সমাপ্তির প্রক্রিয়া করার পরিবর্তে স্ক্রোলটি হঠাৎ বন্ধ হয়ে যাবে।

— খ্রিস্টান

33

দ্রষ্টব্য: easeOutQuintএকটি প্লাগইন প্রয়োজন, jQuery নিজেই কেবল linearএবং থাকে swing।

— newenglander

বন্ধু এই ভাল জিনিস! ধন্যবাদ। এমনকি 'ইজিআউটকুইন্ট' এর পরিবর্তে 'সুইং' দিয়ে এটি করা লক্ষণীয় পার্থক্য দেখায় '।

— জেসি হেড

এটি খারাপ ফর্ম কিনা তা নিশ্চিত নয়, তবে আমি এই উত্তরে একটি পয়েন্টার যুক্ত করার জন্য গৃহীত উত্তরটি সম্পাদনা করেছি। যদি তা হয় তবে কেউ এটিকে ফিরিয়ে দিতে পারে।

— xaxxon

এই সমাধানটি কেবল তখনই কার্যকর হয় যদি পৃষ্ঠার কোনও মানকীয় অনুবর্তী মোডে ব্যাখ্যা করা হয়। উদাহরণস্বরূপ, আপনি যদি <!DOCTYPE html>Chrome এ অন্তর্ভুক্ত না করেন তবে ক্রোম উইন্ডো এবং ডকুমেন্টের উচ্চতার জন্য ঠিক একই মানটি ফিরিয়ে দেবে, এক্ষেত্রে $(document).height()-$(window).height()সর্বদা 0 ফিরে আসবে here এখানে দেখুন: স্ট্যাকওভারফ্লো

— 12103208/…

35

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

$('html, body').scrollTop($(document).height());

— তাতু উলমানেন
সূত্র

আমি কাজ করতে পারে বলে মনে হচ্ছে না। আদৌ কিছু করে না।

— আদম

@ অ্যাডাম আপনি jQuery এর কোন সংস্করণ ব্যবহার করছেন?

— সনি বয়

14

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

প্ল্যানেট ক্লাউডে বিকল্প

যেহেতু আমার কাছে ইতিমধ্যে আমার jQuery অবজেক্টের ক্যাশেড সংস্করণ ছিল ( myPanelনীচের কোডটিতে jQuery অবজেক্টটি রয়েছে), তাই আমি আমার ইভেন্ট হ্যান্ডলারে যে কোডটি যুক্ত করেছি তা হ'ল এই:

myPanel.scrollTop(myPanel[0].scrollHeight - myPanel.height());

(ধন্যবাদ বেন)

— গ্রেগ পেটিট
সূত্র

1

আমার সাথে একটি var d = $('#mydiv'); d.scrollTop (d[0].scrollHeight - d.height ());

— ডিভ

আপনার কি আসলে গণিত করতে হবে? stackoverflow.com/a/44578849/1450294

— মাইকেল শ্যাপার

4

একটি সাধারণ ফাংশন যা পুরো পৃষ্ঠার নীচে লাফ দেয় (তাত্ক্ষণিকভাবে স্ক্রোল করে)। এটি বিল্ট-ইন ব্যবহার করে .scrollTop()। আমি পৃথক পৃষ্ঠার উপাদানগুলির সাথে কাজ করার জন্য এটি খাপ খাইবার চেষ্টা করিনি।

function jumpToPageBottom() {
    $('html, body').scrollTop( $(document).height() - $(window).height() );
}

— ররি ও'কেনে
সূত্র

2

কেন জানি না, তবে এটি ফায়ারফক্স ২ 26.০-এ আমার পক্ষে কাজ করে নি, এবং এই ফাংশনটি যখন চালিত হবে তখন শীর্ষে স্ক্রোল করবে। এই সমস্যাটি সমাধান করে সমাধান করা হয়েছে$(document).scrollTop($(document).height());

— জ্যাক

2

এই একজন আমার পক্ষে কাজ করেছেন:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

— MountainRock
সূত্র

এটি প্রশ্নের উত্তর দেয় না

— হুয়েজ

2

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

$(myScrollingElement).scrollTop(Number.MAX_SAFE_INTEGER);

আপনি যদি স্ক্রোলবারের সাথে কিছু উপাদান না দিয়ে পৃষ্ঠাটি স্ক্রোল করতে চান তবে কেবল myScrollingElement'বডি, এইচটিএমএল' এর সমান করুন।

যেহেতু আমাকে বেশ কয়েকটি জায়গায় এটি করা দরকার তাই আমি এটিকে আরও সুবিধাজনক করার জন্য একটি দ্রুত এবং নোংরা jQuery ফাংশন লিখেছি:

(function($) {
  $.fn.scrollToBottom = function() {
    return this.each(function (i, element) {
      $(element).scrollTop(Number.MAX_SAFE_INTEGER);
    });
  };
}(jQuery));

সুতরাং যখন আমি গুচ্ছ 'স্টাফ যুক্ত করি তখন আমি এটি করতে পারি:

$(myScrollingElement).append(lotsOfHtml).scrollToBottom();

— মাইকেল শ্যাপার
সূত্র

0

পূর্ববর্তী উত্তরে বর্ণিত স্ক্রিপ্টগুলি যেমন:

$("body, html").animate({
    scrollTop: $(document).height()
}, 400)

অথবা

$(window).scrollTop($(document).height());

কাজ করবে না এ ক্রোম এবং লাফানে হতে হবে সাফারি ক্ষেত্রে html ট্যাগে সিএসএস হয়েছে overflow: auto;সম্পত্তি সেট। এটি জানতে আমার প্রায় এক ঘন্টা সময় লেগেছে।

— ইলিয়া রোস্টভটসেভ
সূত্র

0

$('.block').scrollTop($('.block')[0].scrollHeight);

নতুন বার্তা এলে আমি এই কোডটি চ্যাট স্ক্রোল করতে ব্যবহার করি।

— Лиссов Лиссов
সূত্র

দয়া করে আপনার কোডের জন্য কিছু ব্যাখ্যা অন্তর্ভুক্ত করুন, বিশেষত যখন আপনি নিজের কোড বেস থেকে অনুলিপি করেন, অন্য শ্রেণীর জন্য প্রাসঙ্গিক নয় এমন সিএসএস ক্লাস ব্যবহার করে;)

— ব্রুনো মন্টিরিও

কোনও স্ক্রোল বার;) বা সম্পূর্ণ ডকুমেন্টের সাথে কোনও ব্লক নিন।

— 01 Лиссов