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


196

আমার পৃষ্ঠাটি লোড হয়ে যাওয়ার পরে। আমি চাই যে জেকিউয়ারি পৃষ্ঠার নীচে সুন্দরভাবে স্ক্রোল করুক, দ্রুত অ্যানিমেটেড, কোনও স্ন্যাপ / ঝাঁকুনি নয়।

আমি কি এর ScrollToজন্য প্লাগইন চাই ? বা এটি কিছুটা কীভাবে jQuery তে অন্তর্নির্মিত?

উত্তর:


416

আপনি scrollTopসম্পত্তিটি অ্যানিমেট করে কেবল পৃষ্ঠাটি স্ক্রোল করতে অ্যানিমেট করতে পারেন , এর মতো কোনও প্লাগইন প্রয়োজন নেই:

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

পরিবর্তে window.onload(যখন চিত্রগুলি লোড করা হয় ... যা উচ্চতা দখল করে থাকে) এর ব্যবহারটি দ্রষ্টব্য document.ready

প্রযুক্তিগতভাবে সঠিক হতে আপনাকে উইন্ডোর উচ্চতা বিয়োগ করতে হবে, তবে উপরের কাজগুলি:

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

কোনও নির্দিষ্ট আইডিতে স্ক্রোল করতে .scrollTop(), এর মতো এটি ব্যবহার করুন :

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

2
আর একটি সমস্যা হ'ল এটি শেষ হয়ে গেছে বলে মনে হয় এবং তারপরে ব্যবহারকারীটি কিছুটা লক হয়ে যায় এবং খুব ঝাঁকুনির প্রভাব দেয়, ব্যবহারকারীকে স্ক্রোলিং থেকে রোধ করে
AnApprentice

1
@ অ্যানপ্রেন্টিস - কারণ এটি দ্রুত ঘটে (ডিফল্টরূপে 400 মিমি), আমি এই সমস্যাটি দূর করার জন্য কেবল একটি দ্রুত স্ক্রোলের পরামর্শ দেব।
নিক Craver

3
লকটি হ'ল দূরত্ব বন্ধ। এটি দৃশ্যমান অ্যানিমেশনটির অতীত অ্যানিমেশন।
জোশিয়ার রুডেল

27
@ নিকক্রাভার - jQuery .scrolTop () এর সর্বশেষ সংস্করণ সহ কোনও নির্দিষ্ট আইডিতে স্ক্রোল করতে কাজ করছে না বলে মনে হচ্ছে; । অফসেট () দিয়ে শীর্ষে কাজ করা উচিত: $("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
পাওলো জিবেলিনি

3
এই উত্তরটি সম্পাদনা করা দরকার। সম্পত্তির $(document).height()জন্য একটি মূল্য খুব দুর্দান্ত scrollTop, আপনি নমনীয়তা দ্বারা লক্ষ্য করতে পারেন। আমি মনে করি $(document).height() - window.innerHeightঠিক আছে।
সিলভেনন

22

এটার মতো কিছু:

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

লক্ষ্যটি রাইটিং-মন্তব্যে আপডেট করার চেষ্টা করেছি এবং এটি কার্যকর হয়নি। কারণ এটি পৃষ্ঠাতে ইনজেকশন হচ্ছে?
অ্যানপ্রেন্টিস

16
$('html,body').animate({ scrollTop: 9999 }, 'slow');

এটির মতো সহজ, 9999 পৃষ্ঠার উচ্চতা ... বড় পরিসর যাতে এটি নীচে পৌঁছতে পারে।


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

13

আপনি এটি চেষ্টা করতে পারেন

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

10
$("div").scrollTop(1000);

আমার জন্য কাজ কর. নীচে স্ক্রোলগুলি।


13
যদি আপনার পৃষ্ঠাটি 1000px এর চেয়ে দীর্ঘ হয় তবে নয়।
ভলমাইক

4

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

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

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


3

'ডকুমেন্ট.বিডি.সিএলএইন্টহাইট' ব্যবহার করে আপনি শরীরের উপাদানগুলির উচ্চতা পেতে পারেন

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

এই আইডিতে এই স্ক্রোলগুলি 'বিশেষ বিভাগ'


1

JQuery 3 এর জন্য, দয়া করে পরিবর্তন করুন

window (উইন্ডো) .লোড (ফাংশন () {$ ("এইচটিএমএল, বডি") an

প্রতি:

$ (উইন্ডো) .অন ("লোড", ফাংশন (ঙ) {$ ("এইচটিএমএল, দেহ") an


1
function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

এটি আমার কাছ থেকে সমাধানের কাজ এবং আপনি খুঁজে পান, আমি নিশ্চিত


0

JS

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

যদিও এই কোডটি সমস্যা সমাধানে সহায়তা করতে পারে তবে এটি কেন এবং / বা কীভাবে প্রশ্নের উত্তর দেয় তা ব্যাখ্যা করে না । এই অতিরিক্ত প্রসঙ্গ সরবরাহ করা তার দীর্ঘমেয়াদী শিক্ষাগত মানকে উল্লেখযোগ্যভাবে উন্নতি করবে। দয়া করে সম্পাদনা ব্যাখ্যা যোগ করার জন্য সহ সীমাবদ্ধতা এবং অনুমানের কি প্রয়োগ আপনার উত্তর।
টবি স্পিড

0
$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

এই সমাধানটি আমার পক্ষে কাজ করেছিল। এটি পেজ স্ক্রোল ডাউনে দ্রুত কাজ করছে।


0
var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

সুতরাং পৃষ্ঠাটি খুললে এটি 1 মিলিসেকেন্ডের পরে স্বয়ংক্রিয়ভাবে স্ক্রোল হয়

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.