পৃষ্ঠা লোডে আইডিতে স্ক্রোল অ্যানিমেট করুন

Question

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

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

তবে এটি কি আইডি থেকে শুরু হয়ে পৃষ্ঠার শীর্ষে অ্যানিমেটেড লাগবে?

এইচটিএমএল (যা পৃষ্ঠার অর্ধেক পথের নিচে) কেবল সহজভাবে:

<h2 id="title1">Title here</h2>

Comments

এটি কোনও উত্তরের মতো নয়, তবে আমি এরিয়েল ফলসারের "স্ক্রোলটো" প্লাগইনটি উচ্চভাবে সুপারিশ করছি; এটিতে কোনও পৃষ্ঠা প্যান করার জন্য প্রচুর বৈশিষ্ট্য রয়েছে এবং সাধারণ ক্ষেত্রে প্লাগইনটিতে কয়েকটি এক্সটেনশান রয়েছে (উদাহরণস্বরূপ, আপনি যদি তার "লোকালস্ক্রোল" প্লাগইনটি কোনও লিঙ্কের href এ স্ক্রল করার জন্য দরকারী এটি একই পৃষ্ঠায় থাকে)। আপনি এখানে প্লাগইনটি পেতে পারেন: flesler.blogspot.com/2007/10/jqueryscrolto.html

— ফয়সাল

Answer 1

আপনি কেবলমাত্র আপনার উপাদানটির উচ্চতা স্ক্রোল করছেন। অফসেট () নথির সাথে সম্পর্কিত কোনও উপাদানের স্থানাঙ্ক ফেরত দেয় এবং পরম topআপনাকে y- অক্ষ বরাবর পিক্সেলগুলিতে উপাদানটির দূরত্ব দেয়:

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

এবং আপনি এতে একটি বিলম্বও যুক্ত করতে পারেন:

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

Comments

এটি স্বয়ংক্রিয় স্ক্রোলিং সম্পর্কে কী আমাকে "WOW COOL !!" যেতে দেয়? হয়তো এটি আপনার সমাধানের সরলতা।

— theblang

পৃষ্ঠার লোডটিতে আমার একটি উপাদান দেখার জন্য প্রয়োজন ছিল, তবে দুটি সমস্যা ছিল: ক) "এইচটিএমএল, বডি" ব্যবহার করে দুটি কলব্যাক দিয়েছে (প্রতিটি মিলিত উপাদানের জন্য একটি)। খ) এটি শরীর বা এইচটিএমএল কোনটি কাজ করে তা ব্রাউজারের উপর নির্ভর করে। সুতরাং আমি একটি গিস্ট তৈরি করেছি যা আপনি "যে কোনও" ব্রাউজারে স্ক্রোল-ইন-ভিউ কাজ করে এবং আপনার অ্যানিমেশনটি শেষ হওয়ার পরে কেবল একটি কলব্যাক পাবেন তা নিশ্চিত করতে আপনার প্রকল্পে ব্যবহারের জন্য রূপান্তর করতে পারেন। gist.github.com/netsi1964/4ddffe1ae14e05220d25

— নেটসই 1964

এটি সত্যই সঠিক নয়। আপনার সত্যিকারের শরীর বা উপাদানগুলির বর্তমান স্ক্রোল অবস্থানটি বিবেচনা করা উচিত যা আমরা চেষ্টা করছি scroll। এটি মনে রেখে আপনি বর্তমানের স্ক্রোলের অবস্থানটি আমরা যে উপাদানটিকে দেখতে চাই bodyতার offset().topঅবস্থানের সাথে যুক্ত করবে, ফলস্বরূপ যোগফলটি আমরা যে মূল্যটিতে স্ক্রোল করতে চাই তা হ'ল। $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);

— mattdevio

@ ম্যাগগ্রিনবার্গ আপনি কি এটি ব্যবহার করে দেখেছেন? বর্তমান স্ক্রোল অবস্থান যদি মান 0 এর ওপরের কিছু হয় তবে আপনি যা পরামর্শ দিচ্ছেন তা কার্যকর নাও হতে পারে। ধরা যাক যে স্ক্রোলযোগ্য ধারকটি 1000 পিক্সেল লম্বা এবং বর্তমান স্ক্রোলের অবস্থানটি 1000 এ রয়েছে Let's যাক আপনি যে উপাদানটি স্ক্রোল করছেন তার উপাদানটি ভার্টিকাল সেন্টারে 500 এ বসুন I আমি মনে করি যে আপনি যা পরামর্শ দিচ্ছেন তা 1500 এ স্ক্রোল করতে বলবে ঠিক আছে?

— BumbleB2na

@ BumbleB2na .offset().topএই পরিস্থিতিতে আপনাকে একটি নেতিবাচক নম্বর দেবে। এবং এটি সত্যিই কেবলমাত্র কাজ করে bodyএবং htmlযেহেতু offset().topআপনাকে নথির শীর্ষ অফসেট দিতে চলেছে, উদ্দেশ্যযুক্ত স্ক্রোলিং পিতামাতার নয়।

— ম্যাটদেডিও

Answer 2

স্ক্রোলইন্টিভিউ () ফাংশন সহ বিশুদ্ধ জাভাস্ক্রিপ্ট সমাধান :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

মন্তব্যসমূহে উল্লিখিত জুলিয়েন_সি হিসাবে পিএস 'স্মুথ' পরামিতি এখন ক্রোম 61 থেকে কাজ করে।

Comments

এখন কাজ করে (ক্রোম 61 থেকে)

— জুলিয়ান_সি

ব্রাউজারের সামঞ্জস্যতা যাচাই করতে ভুলবেন না। 10/2018 আইই (11) এর মতো, এজ এবং সাফারি "স্ক্রোলইন্টোভিউ" সমর্থন করে তবে "মসৃণ" বিকল্পটি নয়।

— ধাতু_জ্যাক 1

খাঁটি জেএস ftw। ধন্যবাদ এই স্নিপেটের জন্য! ডাবল বাটরি ক্রিম হিসাবে মসৃণ

— jean d'arme

Answer 3

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery- অ্যানিমেট-বডি-অল-ব্রাউজারগুলির জন্য ।

Answer 4

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

আপনার ক্ষেত্রে কোডটি

$("#title1").animatedScroll({easing: "easeOutExpo"});

Comments

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

— ব্রুনোইস

মসৃণ স্ক্রোলিংয়ের জন্য গণনা করার জন্য অনেক পিক্সেল প্রয়োজন। অবশ্যই একটি ধীর "কম্পিউটার" (আরও জিপিইউ) এটি করতে পারে না তবে পর্যাপ্ত এএলইউয়ের অভাবে রয়েছে। সুতরাং সাধারণত তিনি সঠিক। এবং সত্যিই সহজ স্ক্রোলিং lib।

— রোল্যান্ড

Answer 5

নিম্নলিখিত কোড দিয়ে চেষ্টা করুন। শ্রেণীর নাম পৃষ্ঠা-স্ক্রোল সহ উপাদান তৈরি করুন এবং hrefসম্পর্কিত লিঙ্কগুলির আইডি নাম রাখুন

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });

Answer 6

সহজ স্ক্রোল জন্য, নিম্নলিখিত শৈলী ব্যবহার করুন

উচ্চতা: 200px; উপচে পড়া: স্ক্রোল;

এবং এই স্টাইলের ক্লাসটি ব্যবহার করুন যা কোন ডিভ বা বিভাগ আপনি স্ক্রোল প্রদর্শন করতে চান