JQuery sc। ScrolTo () ফাংশনটি ব্যবহার করে কীভাবে উইন্ডোটি স্ক্রোল করবেন

Question

ব্যবহারকারী যখনই নথির শীর্ষের কাছে পৌঁছে যায় আমি প্রতিবার 100px স্ক্রোল করার চেষ্টা করছি।

যখন ব্যবহারকারী নথির শীর্ষে চলে আসে তখন আমার কাছে ফাংশনটি সম্পাদন করা হয় তবে .scrolTo ফাংশনটি কাজ করছে না।

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

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

আমি জানি আমার jquery পৃষ্ঠাটি সঠিকভাবে লিঙ্ক হয়েছে কারণ আমি জুড়ে আরও অনেক jquery ফাংশন ব্যবহার করছি এবং তারা সব ঠিকঠাক কাজ করে। আমি উপর থেকে 'px' অপসারণ করার চেষ্টা করেছি এবং এটি কোনও পার্থক্য বলে মনে হচ্ছে না।

Comments

Jquery নিজেই আমার ভাল কাজ করা, কিন্তু আপনি কি নিশ্চিত যে আপনার কাছে স্ক্রোলটো প্লাগইন সঠিকভাবে লিঙ্ক হয়েছে? সতর্কতার জন্য সেই সতর্কতার মধ্যে একটি পরিবর্তন করুন ($। স্ক্রোলটো);

— অ্যান্ড্রু

Answer 1

যদি এটি কাজ না করে আপনি jQuery এর স্ক্রোলটপ পদ্ধতিটি ব্যবহার করার চেষ্টা করছেন না কেন?

$("#id").scrollTop($("#id").scrollTop() + 100);

আপনি যদি সহজেই স্ক্রোলের সন্ধান করতে চান তবে আপনি এটি নির্ধারণের জন্য বেসিক জাভাস্ক্রিপ্ট সেটটাইমআউট / সেটইন্টারওয়াল ফাংশনটিকে একটি নির্দিষ্ট সময়সীমার মধ্যে 1px ইনক্রিমেন্টে স্ক্রোল করতে পারেন।

Comments

দ্রষ্টব্য আপনি যদি পুরো পৃষ্ঠাটি স্ক্রোল করতে চান এবং স্বতন্ত্র উপাদান নয়, টিম যেমন এখানে নির্দেশ করেছেন ঠিক তেমনই $ ('এইচটিএমএল, বডি') ব্যবহার করুন। শুধু $ ('বডি') সমস্ত ব্রাউজারে কাজ করবে না।

— i--

Answer 2

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

Comments

আমি প্রায়শই ভাবতাম যে লোকেরা কেবল 'এইচটিএমএল' এর পরিবর্তে স্ক্রোলটপের জন্য 'এইচটিএমএল, বডি' কেন ব্যবহার করে। এই সম্পর্কে কোন চিন্তা?

— স্কট গ্রিনফিল্ড

+1 আমার পক্ষে কাজ করেছে;) আমি কী জানতে html, bodyকেবল HTML এর পরিবর্তে জানতে আগ্রহী ?

— কাতো

@ScottGreenfield, @Kato: নিশ্চিত না কেন, কিন্তু এই মন্তব্য সহ না বলে bodyক্রোম 4 এই বিরতি: stackoverflow.com/questions/1890995/...

— Yuji 'Tomita' Tomita

scrollTop: 0ভাল কাজ করছে। কিন্তু সময়কাল হ্রাস পায়। 1000 গতিতে সেট করা থাকলে

— ঠিকঠাক কাজ করে

যতক্ষণ না আপনি একটি সম্পূর্ণ পদ্ধতি যুক্ত করতে চান এটি এটি একটি ভাল সমাধান - এটি দুটিবার কার্যকর হবে। কমপ্লিটিকের সমাধান আরও মার্জিত এবং এটি প্রতিরোধ করবে।

— প্ল্যাঙ্কগুই

Answer 3

jQuery এখন অ্যানিমেশন ভেরিয়েবল হিসাবে স্ক্রোলটপ সমর্থন করে।

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

মসৃণভাবে স্ক্রোল করার জন্য আপনার আর সেটটাইমআউট / সেটইন্টারভাল দরকার নেই।

Comments

কিছু সিনট্যাক্স ত্রুটি পেয়েছে - আপনার বন্ধ হওয়া অনুপস্থিত { অন্যথায় এটি একটি ভাল পয়েন্ট।

— জোশুয়া

$("#id").offset().topপরিবর্তে এটি করা উচিত ?

— কোডুলিকে

Answer 4

htmlবনাম bodyইস্যুটি ঘুরে দেখার জন্য , আমি সরাসরি সিএসএস অ্যানিমেটেড না window.scrollTo();করে প্রতিটি পদক্ষেপে কল করে এটি ঠিক করেছি:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

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

আপনি jQuery এর অ্যানিমেট ফাংশনটি সম্পর্কে কী করতে পারেন সে সম্পর্কে আরও তথ্যের জন্য http://james.padolsey.com/javascript/fun-with-jquerys-animate/ এ দেখুন ।

Comments

এটা অসাধারণ. আমি শুধু পরিবর্তন window.pageYOffsetকরার $(window).scrollTop()এবং window.scrollTo(0, val)করতে $(window).scrollTop(val)তাই আমি ব্রাউজার উপযুক্ততা সম্পর্কে চিন্তা করতে হবে না।

— বাম ক্লিক ক্লাবনে

আমি কখনই jQuery এর অ্যানিমেট পদ্ধতিতে কোনও বস্তু পাস করার চিন্তা করি নি। অনেক সম্ভাব্য ব্যবহার। এই সমাধানটি দুর্দান্ত, আপনাকে ধন্যবাদ।

— সংশ্লেষণ

হ্যাঁ, কৌশলটি একটি গুরুত্বপূর্ণ অবদান। এর আগে সরাসরি "উইন্ডোজ.স্ক্রোলটো ()" ব্যবহার করে ব্রাউজার সংক্রান্ত সমস্যাগুলি পেয়েছিল তবে এটি "সম্পূর্ণ" কল-ব্যাক বা কোনও প্রতিশ্রুতি দেয় না। এই সমাধানের জন্য আপনাকে কমপ্লিটিক্স ধন্যবাদ। এছাড়াও, বামফ্লিক্লিকবেনকে আমার ধন্যবাদ; আমি ".scrolTop ()" ব্যবহার করে তার প্রকরণটি প্রয়োগ করেছি। এছাড়াও, প্রতি লিঙ্কে "জেমস.প্যাডলসি" নিবন্ধটি খুব সার্থকভাবে পাঠযোগ্য ers

— IAM_AL_X

আমি মনে করি যে "উইন্ডো.স্ক্রোলটো ()" সমস্ত আধুনিক ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হওয়া উচিত।

— IAM_AL_X

Answer 5

দেখে মনে হচ্ছে আপনি সিনট্যাক্সটি কিছুটা ভুল পেয়েছেন ... আমি আপনার কোডের উপর ভিত্তি করে ধরে নিচ্ছি যে আপনি 800 এমএসে 100px স্ক্রোল করার চেষ্টা করছেন, যদি তাই হয় তবে এটি কাজ করে (স্ক্রোলটো 1.4.1 ব্যবহার করে):

$.scrollTo('+=100px', 800, { axis:'y' });

Answer 6

আসলে কিছু একটা

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

দুর্দান্তভাবে কাজ করবে এবং প্যাডিং সমর্থন করবে। আপনি সহজেই মার্জিনগুলি সমর্থন করতে পারেন - সমাপ্তির জন্য নীচে দেখুন

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}