স্ক্রোলযোগ্য ডিভের শীর্ষে ফিরে স্ক্রোল করুন

Question

<div id="containerDiv"></div>

#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}

document.getElementById("containerDiv").innerHTML = variableLongText;

পরের বার কনটেনার ডিভের শীর্ষে কীভাবে স্ক্রোল অবস্থানটি পুনরায় সেট করবেন?

Answer 1

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

scrollTopগুণাবলী দেখুন ।

Comments

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

— শে

@ s12345 আপনি আমাদের পুনরুত্পাদনযোগ্য পরীক্ষার কেসটি আরও ভাল করে তুলতে চাইবেন আমাদের আপনার সমস্যা (উদাহরণস্বরূপ jsfiddle.net এ ) এবং আপনি কী ওএস / ব্রাউজার / সংস্করণ ব্যবহার করছেন তা বলুন।

— ফ্রেগজ

দুঃখিত আমার ভুল .. এটি কার্যকর! অনুরূপ দুটি ডিভ নিয়ে বিভ্রান্ত হয়ে পড়েছি।

— শে

Answer 2

মসৃণ অ্যানিমেশন দিয়ে এটি করার আর একটি উপায়

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

Comments

ভাল কাজ করে, তবে দয়া করে ব্যবহার করবেন না slow, এটি এত ... ধীর!

— পাস্কাল

পরিবর্তে slowদ্বিতীয় যুক্তি হিসাবে পাস । আপনি একটি পূর্ণসংখ্যায় পাস করতে পারেন যা অ্যানিমেশনটি শেষ হওয়ার জন্য মিলিসেকেন্ডের সংখ্যা।

— সুশান্ত গুপ্ত

এটিকে উপবাসে পরিবর্তন করা হয়েছে :)

— মাহমুদ ইব্রাহিম

সর্বোত্তম উত্তর! ধন্যবাদ!

— যোগপান্ডা

আপনি jquery ব্যবহার করা হলে এটি সূক্ষ্ম কাজ করে। আপনি যদি কৌণিক টাইপস্ক্রিপ্ট (সরল জাভাস্ক্রিপ্ট) ব্যবহার করেন তবে এটি কার্যকর হবে না। আপনি সরল জাভাস্ক্রিপ্ট দিয়ে কীভাবে এটি অর্জন করতে পারেন।

— বাবুলাস

Answer 3

আমি এই প্রশ্নের বিদ্যমান উত্তরগুলি চেষ্টা করেছিলাম এবং তাদের মধ্যে কেউই আমার জন্য ক্রোমে কাজ করেনি। কাজটি কি কিছুটা আলাদা ছিল:

$('body, html, #containerDiv').scrollTop(0);

Answer 4

scrollTo

window.scrollTo(0, 0);

উইন্ডোজগুলি শীর্ষে স্ক্রোল করার চূড়ান্ত সমাধান - সেরা অংশটি হ'ল এটির জন্য কোনও আইডি নির্বাচক প্রয়োজন হয় না এবং এমনকি আমরা আইএফআরএম কাঠামোটি ব্যবহার করলে এটি অত্যন্ত কার্যকরভাবে কাজ করবে।

স্ক্রোলটো () পদ্ধতিটি নির্দিষ্ট স্থানাঙ্কগুলিতে নথিকে স্ক্রল করে।
উইন্ডো.স্ক্রোলটো (xpos, ypos);
xpos নম্বর প্রয়োজনীয়। X- অক্ষ (অনুভূমিক) বরাবর, পিক্সেল
ypos সংখ্যায় প্রয়োজনীয় স্ক্রোল করার স্থানাঙ্ক । Y- অক্ষ (উল্লম্ব) বরাবর, পিক্সেলগুলিতে স্ক্রোল করার স্থানাঙ্ক

jQuery এর

এটির জন্য আরেকটি বিকল্প হ'ল jQuery ব্যবহার করা এবং এটি একইটির জন্য একটি স্বচ্ছ চেহারা দেবে

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

যেখানে 0 স্ক্রোলটপ এর পরে পিক্সেলের উল্লম্ব স্ক্রোলবার অবস্থান নির্দিষ্ট করে এবং দ্বিতীয় পরামিতিটি একটি alচ্ছিক পরামিতি যা মাইক্রোসেকেন্ডগুলিতে কার্য সম্পাদন করার সময় দেখায়।

Comments

আমরা যদি কেবলমাত্র শীর্ষে একটি অভ্যন্তরীণ ডিভ স্ক্রোল করতে চাই? এটি শেষ পর্যন্ত কাজ করবে না।

— জন লর্ড

উপাদানগুলির কাছে। স্ক্রোলটো পদ্ধতিও রয়েছে, আপনি করতে পারেনdocument.getElementById('scroller').scrollTo(0,0)

— মোজিমি

Answer 5

এটি আমার পক্ষে কাজ করেছে:

document.getElementById('yourDivID').scrollIntoView();

Comments

এটি আমার পছন্দসই সমাধান। মসৃণ ট্রানজিশনের জন্য এটি যুক্ত করুন:document.getElementById("yourDivID").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})

— ক্রিস

এছাড়াও, নোট করুন যে scollIntoViewআপনি যদি সেই উপাদানটিতে কল করেন যা কেবল স্ক্রোল করা উচিত। অন্য কথায়, উপাদান আপনি স্ক্রোল করতে চান তাহলে এটি কল না করার উপাদান আপনি স্ক্রোল করতে চান তাহলে এটি কল।

— ক্রিস

Answer 6

যারা এখনও এই কাজটি করতে পারবেন না তাদের জন্য নিশ্চিত করুন যে jQuery ফাংশনটি ব্যবহার করার আগে উপচে পড়া উপাদানটি প্রদর্শিত হয়েছে ।

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

$('#elem').show();
$('#elem').scrollTop(0);

Comments

জীবন রক্ষাকারী! স্ক্রোলটপ কাজ না করেই বাঁচার ইচ্ছা হারিয়ে ফেলতে শুরু করেছিল! একটি সেটটাইমআউট ফাংশনে আমার স্ক্রোলটপ কলটি রাখতে হয়েছিল।

— এভিএফসি_ববল 88

আমিও একই অনুভব করছি! আমি একটি বুটস্ট্র্যাপ মডেল ডায়ালগ বক্সে কাজ করছিলাম। আমাকে মডেলের জন্য একটি ইভেন্ট সেটআপ করতে হয়েছিল যা মোডাল অ্যানিমেটিং বন্ধ না হওয়া পর্যন্ত স্ক্রোলবারটিকে রিসেট করে না। এটি আমি ব্যবহার করা কোড: $ ('# অ্যাড_মডাল') on

— ইরভ লেনার্ট

Answer 7

আমার জন্য স্ক্রোলটপ উপায়টি কার্যকর হয়নি তবে আমি অন্যটি খুঁজে পেয়েছি:

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

নির্ভরযোগ্য সিএসএস রেন্ডারিংয়ের জন্য সর্বনিম্ন সময় পরীক্ষা করে নি যদিও 100 মিমি ওভারকিল হতে পারে।

Answer 8

আপনি যদি মসৃণ রূপান্তর দিয়ে স্ক্রোল করতে চান তবে আপনি এটি ব্যবহার করতে পারেন!

(ভ্যানিলা জেএস)

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

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

আশাকরি এটা সাহায্য করবে!!

Answer 9

ফ্রান্সোইস নলের উত্তর অনুসারে "যারা এখনও এই কাজটি করতে পারেন না তাদের জন্য, নিশ্চিত করুন যে jQuery ফাংশনটি ব্যবহার করার আগে উপচে পড়া উপাদান প্রদর্শিত হয়েছে।"

আমি একটি বুটস্ট্র্যাপ মডেলটিতে কাজ করে যাচ্ছিলাম যে আমি বারবার এক ডিভের মধ্যে অ্যাকাউন্টের অনুমতি নিয়ে এসেছি যা y মাত্রার উপর দিয়ে প্রবাহিত হচ্ছে। আমার সমস্যাটি ছিল, আমি jquery .scrolTop (0) ফাংশনটি ব্যবহার করার চেষ্টা করছিলাম এবং এটি আমি কীভাবে চেষ্টা করেছিলাম তা কার্যকর হবে না। আমাকে মডেলের জন্য একটি ইভেন্ট সেটআপ করতে হয়েছিল যা মোডাল অ্যানিমেটিং বন্ধ না হওয়া পর্যন্ত স্ক্রোলবারটিকে রিসেট করে না। পরিশেষে আমার পক্ষে যে কোডটি কাজ করেছিল তা এখানে:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

Answer 10

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

document.getElementsByTagName('body')[0].scrollTop = 0;

শুভেচ্ছা সহ,

Answer 11

মসৃণ স্ক্রোলিং ট্রানজিশন সহ এটি কেবল আমার জন্য কাজ করেছিল:

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

Answer 12

শ্রেণীর নাম অনুসারে উপাদান পাওয়ার সময়, রিটার্ন মানটি একটি অ্যারে ভুলে যাবেন না; সুতরাং এই কোড:

document.getElementByClassName("dropdown-menu").scrollTop = 0

কাজ করবে না। পরিবর্তে নীচে কোড ব্যবহার করুন।

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

আমি অনুভব করেছি যে অন্য লোকেরাও আমার মতো একই ধরণের সমস্যার মুখোমুখি হতে পারে; সুতরাং এই কৌশলটি করা উচিত।

Answer 13

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

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

আপনি যদি কোনও শ্রেণীর নাম দিয়ে স্ক্রোল করতে চান তবে নীচের কোডটি ব্যবহার করুন

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

Answer 14

আইডিতে সংশ্লিষ্ট ডিভের আইডি থাকা উচিত যা ওভারফ্লো সিএসএস সম্পত্তি রয়েছে।

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;