উপাদানটিতে jQuery স্ক্রোল

2321

আমার এই inputউপাদানটি রয়েছে:

<input type="text" class="textfield" value="" id="subject" name="subject">

তারপরে আমার কাছে অন্য কিছু উপাদান রয়েছে, যেমন অন্যান্য পাঠ্য ইনপুট, টেক্সারিয়াস ইত্যাদি have

যখন ব্যবহারকারী এটির inputসাথে ক্লিক করে#subject , পৃষ্ঠা একটা চমৎকার অ্যানিমেশন সঙ্গে পৃষ্ঠার শেষ উপাদান স্ক্রোল করা উচিত নয়। এটি নীচে স্ক্রোল হওয়া উচিত শীর্ষে নয়।

পৃষ্ঠার শেষ আইটেমটি এর submitসাথে একটি বোতাম রয়েছে #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

অ্যানিমেশন খুব দ্রুত হওয়া উচিত নয় এবং তরল হওয়া উচিত।

আমি সর্বশেষতম jQuery সংস্করণ চালাচ্ছি। আমি কোনও প্লাগইন ইনস্টল না করে এটি অর্জনের জন্য ডিফল্ট jQuery বৈশিষ্ট্যগুলি ব্যবহার করতে পছন্দ করি।

javascript jquery scroll

— DiegoP।
সূত্র

3

বিকাশকারী.মোজিলা.আর.ইন-

— ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেট / স্ক্রোলআইটোভিউ

scrollToএকটি ক্রোম প্লাগইনের কারণে আমার জন্য অক্ষম ছিল, কোনটি নিশ্চিত নয়।

— জ্যাকসনক্র

4018

আইডি সহ আপনার একটি বোতাম আছে বলে ধরে নেওয়া button, এই উদাহরণটি ব্যবহার করে দেখুন:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

আমি নিবন্ধটি থেকে কোডটি পেয়েছি মসৃণভাবে কোনও jQuery প্লাগইন ছাড়াই কোনও উপাদানে স্ক্রোল করুন । এবং আমি এটি নীচের উদাহরণে পরীক্ষা করেছি।

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

স্নিপেট প্রসারিত করুন

— স্টিভ
সূত্র

24

এটি সব ক্ষেত্রে কার্যকর হবে না। দেখুন stackoverflow.com/questions/2905867/...

— Janis Elmeris

7

পছন্দ করুন Googling আমি পেয়েছি এই , তাই উভয় ট্যাগ আপনি ব্রাউজারের ধরন প্রতি অতিরিক্ত যুক্তি আছে চাই না প্রয়োজন হয়।

— s3m3n

72

আপনি যদি অ্যানিমেশনটি না চান এবং পরিবর্তে উপাদানটিতে তাত্ক্ষণিকভাবে ঝাঁপিয়ে পড়তে চান তবে .scrollTop(…)পরিবর্তে ব্যবহার করুন .animate({scrollTop: …}, …)।

— ররি ও'কেনে

11

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

— স্যান্ডার

10

অ্যানিমেশনটি সম্পূর্ণ হয়ে গেলে আপনি যদি কলব্যাক ব্যবহার করেন এবং এই সমাধানটি দিয়ে দুবার কলব্যাকের আগুন লক্ষ্য করেন, "$ ('এইচটিএমএল বডি') ব্যবহার করে দেখুন" .animate (... "কমা দুই সজীব ঘটনা HTML- এর জন্য এক, শরীরের জন্য এক নির্মিত আপনি কি সত্যিই শুধু এইচটিএমএল শরীর ধন্যবাদ @TJ Crowder জন্য এক চাই।। stackoverflow.com/questions/8790752/...

— BoatCode

526

jQuery .scrolTo (): দেখুন - ডেমো, এপিআই, উত্স

পৃষ্ঠা / উপাদান স্ক্রোলিংকে আরও সহজ করতে আমি এই লাইটওয়েট প্লাগইনটি লিখেছি। এটি নমনীয় যেখানে আপনি একটি লক্ষ্য উপাদান বা নির্দিষ্ট মান পাস করতে পারেন। সম্ভবত এটি jQuery এর পরবর্তী অফিসিয়াল প্রকাশের অংশ হতে পারে, আপনি কী ভাবেন?

উদাহরণ ব্যবহার:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

বিকল্প:

স্ক্রোলট্যারেট : একটি উপাদান, স্ট্রিং বা সংখ্যা যা পছন্দসই স্ক্রোলের অবস্থান নির্দেশ করে।

অফসেটপ : একটি নম্বর যা স্ক্রোল লক্ষ্যর উপরে অতিরিক্ত ব্যবধানকে সংজ্ঞায়িত করে।

সময়কাল : অ্যানিমেশন কতক্ষণ চলবে তা নির্ধারণ করে একটি স্ট্রিং বা সংখ্যা।

ইজিং : একটি স্ট্রিং যা নির্দেশ করে যে রূপান্তরের জন্য কোন স্বাচ্ছন্দ্য ফাংশনটি ব্যবহার করতে হবে।

সম্পূর্ণ : অ্যানিমেশনটি শেষ হলে কল করার জন্য একটি ফাংশন।

— টিমোথি পেরেজ
সূত্র

2

এটি ক্রোমের সাম্প্রতিক আপডেট হওয়া পর্যন্ত কাজ করে যাচ্ছিল। আমার একটি সংস্করণ রয়েছে যা আমি বর্তমানে মেমোরিবক্সডিংসিংস / ফটোগ্রাফি- পোস্টগুলিতে ব্যবহার করি (যদি আপনি এটি চেষ্টা করতে চান)। ঠিক হয়ে গেলে আমি একটি আপডেট পোস্ট করব।

— টিমোথি পেরেজ

স্থির, দেখা যাচ্ছে এটি আসলে jquery.com এর একটি জেএস ফাইল যা এটি হত্যা করছিল। আপনি যদি এটি চেষ্টা করেন এখনই কাজ করা উচিত।

— টিমোথি পেরেজ

4

@ টিমোথিপ্রেজ: আমি নিশ্চিত যে এর অর্থ বাণিজ্যিক ব্যবহারের জন্য কিছু অনুমোদিত? আমি নিশ্চিত যে এমন অনেক লোক আছে যারা কেবলমাত্র তাদের ওয়েবসাইটের যে কোনও স্নিপেট কোডটি ব্যবহার করতে চান এবং এটি তাদের রাতে খুব অল্প সহজে ঘুমাতে সহায়তা করবে? এমআইটি লাইসেন্সের মতো কিছু আপনার প্রয়োজন অনুসারে হতে পারে? en.wikipedia.org/wiki/MIT_License

— রবার্ট Massaioli

13

'(' বডি ') এফএফ তে কাজ করে না, তাই tried (' এইচটিএমএল, বডি ') চেষ্টা করেছিল যা কাজ করে।

— কিরণভজ

5

যে কেউ প্রয়োজন এই স্ক্রিপ্টের উৎস, তাহলে এখানে আপনি এটি পেতে পারেন flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— Arturs

370

আপনি যদি মসৃণ স্ক্রোল প্রভাব সম্পর্কে খুব আগ্রহী না হন এবং কোনও নির্দিষ্ট উপাদানটিতে কেবল স্ক্রোলিং করতে আগ্রহী না হন তবে আপনার এই জন্য কিছু jQuery ফাংশন প্রয়োজন হবে না। জাভাস্ক্রিপ্ট আপনার কেসটি কভার করেছে:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

সুতরাং আপনাকে যা করতে হবে তা হ'ল: $("selector").get(0).scrollIntoView();

.get(0) ব্যবহার করা হয়েছে কারণ আমরা জাভাস্ক্রিপ্টের DOM উপাদানটি পুনরুদ্ধার করতে চাই এবং JQuery এর DOM উপাদানটি নয়।

— Atharva
সূত্র

12

আপনি কি ব্যবহার করতে পারেন $(selector)[0]?

— রবডাব্লু

16

রবডাব্লু, হ্যাঁ আপনি কেবল [0] ব্যবহার করতে পারেন তবে পান (0) আপনাকে অপরিবর্তিত বা নেতিবাচক সূচী থেকে রক্ষা করবে। উত্সটি দেখুন: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

— corbacho

20

আপনি যদি কিছুতেই jQuery ব্যবহার করতে না চান তবে কেবল ব্যবহার করুন document.getElementById('#elementID').scrollIntoView()। কোনও উপাদান নির্বাচন করতে এবং তারপরে এটিকে নিয়মিত জাভাস্ক্রিপ্টে রূপান্তর করতে ~ 100k লাইব্রেরি লোড করবেন না।

— গাভিন

61

@ গ্যাভিন আমি নিশ্চিত যে আপনি এটির অর্থ বোঝাতে চেয়েছিলেন:document.getElementById('elementID').scrollIntoView()

— ব্রায়ান

3

কুল। তবে ব্যবহারের আগে, ব্রাউজারটি এটি সমর্থন করে তা নিশ্চিত করুন। মজিলা অনুসারে "এটি একটি পরীক্ষামূলক প্রযুক্তি"

— তেজস্বী হেগদে

48

এই সহজ স্ক্রিপ্ট ব্যবহার

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

এইভাবে সাজান যে কোনও url- এ যদি একটি হ্যাশ ট্যাগ পাওয়া যায়, আইডিতে স্ক্রোলটি অ্যানিমেট। যদি হ্যাশ ট্যাগ পাওয়া না যায় তবে স্ক্রিপ্টটি উপেক্ষা করুন।

— Warface
সূত্র

$(window.location.hash)jQuery এর রেজেক্স আইডি সনাক্তকরণ পূরণ করতে ব্যর্থ হ্যাশগুলির জন্য কাজ করবে না। উদাহরণস্বরূপ, হ্যাশগুলিতে সংখ্যা রয়েছে। এটিও কিছুটা বিপজ্জনক; ইনপুটটির ফর্ম্যাটটি বৈধ হওয়া উচিত যাতে আপনি কোনও ভিন্ন উপাদান নির্বাচন না করে।

— dchacke

35

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

স্নিপেট প্রসারিত করুন

— davidcondrey
সূত্র

1

এটিকে আরও সর্বজনীন করতে এবং ব্রাউজারের লিঙ্ক উইন্ডোতে হ্যাশট্যাগের অপ্রয়োজনীয়

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

— স্থাপনাকে

31

স্টিভ এবং পিটারের সমাধানটি খুব ভালভাবে কাজ করে।

তবে কিছু ক্ষেত্রে আপনাকে মানটি পূর্ণসংখ্যায় রূপান্তর করতে হতে পারে। আশ্চর্যের বিষয় হল, থেকে প্রাপ্ত মানটি $("...").offset().topমাঝে মধ্যে হয় float।
ব্যবহার করুন:parseInt($("....").offset().top)

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

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

— তেজস্বী হেগদে
সূত্র

22

"অ্যানিমেট" সমাধানের একটি কমপ্যাক্ট সংস্করণ।

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

বেসিক ব্যবহার: $('#your_element').scrollTo();

— রেজগার ক্যাডারো
সূত্র

21

এইভাবেই আমি এটি করি।

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

যে কোনও ব্রাউজারে কাজ করে।

এটি সহজেই কোনও ফাংশনে আবৃত হতে পারে

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

এখানে একটি কাজের উদাহরণ

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

স্নিপেট প্রসারিত করুন

ডক্স

— এডওয়ার্ড ওকারবার্গ
সূত্র

6

খুব ছোট এবং মিষ্টি। একটি বিষয় লক্ষণীয় - আমি মনে করি এটি স্ক্রোলটপ সেট করে যেমন ভিউপোর্টের শীর্ষে স্ক্রোল না করে কেবল এটি ভিউতে (ভিউপোর্টের নীচে হতে পারে) স্ক্রোল করে।

— ওজি শান

20

আমি jQuery ছাড়াই একটি উপায় জানি:

document.getElementById("element-id").scrollIntoView();

সম্পাদনা করুন: দু'বছর হয়ে গেছে এবং আমি এখনও এলোমেলোভাবে পোস্টটি লমাও থেকে খ্যাতি পাচ্ছি

— GameMaster1928
সূত্র

18

আপনি যদি কেবল কোনও ইনপুট উপাদানটিতে স্ক্রোলিং পরিচালনা করছেন তবে আপনি ব্যবহার করতে পারেন focus()। উদাহরণস্বরূপ, আপনি যদি প্রথম দৃশ্যমান ইনপুটটিতে স্ক্রোল করতে চান:

$(':input:visible').first().focus();

বা ক্লাস সহ একটি ধারক মধ্যে প্রথম দৃশ্যমান ইনপুট .error:

$('.error :input:visible').first().focus();

এটি নির্দেশ করার জন্য ট্রিসিয়া বলকে ধন্যবাদ !

— বেঞ্জামিন ওকস
সূত্র

17

সঙ্গে এই সমাধান যদি আপনি কোন প্লাগইন প্রয়োজন হবে না এবং সেখানে কোন সেট আপ প্রয়োজন আপনার বন্ধ করার আগে স্ক্রিপ্ট স্থাপন ব্যতীত </body>ট্যাগ।

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

লোডে, ঠিকানায় যদি একটি হ্যাশ থাকে তবে আমরা এটিতে স্ক্রোল করি।

এবং - আপনি যখনই কোনও aলিঙ্কে ক্লিক করেনhref হ্যাশ উদাহরণ#top , আমরা এটিতে স্ক্রোল করি।

— জনাথন
সূত্র

এটি সম্ভবত এর > 1পরিবর্তে হওয়া উচিত 0, /#কারণ এই স্ক্রিপ্টটি ভেঙে যায়

— টালবয়

লিঙ্কগুলি খারাপভাবে তৈরি না করা থাকলেও টিওয়াই না করে আপনার প্রযুক্তিগতভাবে একটি খালি হ্যাশ URL দিয়ে শেষ করা উচিত নয়। (যদিও এই কোডটির নিজস্ব সংস্করণে এই প্যাচটি ইতিমধ্যে অন্তর্ভুক্ত রয়েছে ^^)

— জোনাথন

এই কোডের সাথে একটি জিটর যুক্ত রয়েছে তবে এটি সহজেই স্থিরযোগ্য। return false;অ্যাঙ্করটিতে তত্ক্ষণাত স্ক্রোলিং হওয়া - ঘটতে না থেকে ডিফল্ট ক্রিয়াটি রোধ করতে আপনার অন ক্লিকের ইভেন্টের শেষে থাকা দরকার ।

— roncli

2

@ আরনক্লি ভাল পয়েন্ট - বিকল্প হিসাবে আপনি ঠিক করতে পারেনe.preventDefault();

— জোনাথন

e.preventDefault()তবে ক্লিক করে ইউআরএলটিতে হ্যাশ আপডেট করে না, এটি সর্বদা হ্যাশ ছাড়াই একটি ইউআরএল

— জয়সুর্য_জ

8

বেশিরভাগ ক্ষেত্রে, প্লাগইন ব্যবহার করা ভাল। সিরিয়াসলি। আমি আমার এখানে টাউট করতে যাচ্ছি । অবশ্যই অন্যরাও আছেন। তবে দয়া করে যাচাই করুন যে তারা প্রথমে যে প্লাগইনগুলি চান তার জন্য তারা সত্যিই এড়াচ্ছেন কিনা - এগুলি সবই করেন না।

আমি অন্য কোথাও একটি প্লাগইন ব্যবহার করার কারণগুলি সম্পর্কে লিখেছি । সংক্ষেপে, এক লাইনার এখানে সর্বাধিক উত্তর অন্তর্ভুক্ত করে

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

খারাপ ইউএক্স।

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

এই সমস্যাগুলি (এবং অন্যদের একগুচ্ছ ) পরিচালনা করতে, আপনি আমার, jQuery.scrollable এর একটি প্লাগইন ব্যবহার করতে পারেন । কলটি তখন হয়ে যায়

$( window ).scrollTo( targetPosition );

এবং এটাই. অবশ্যই, আরও বিকল্প আছে ।

লক্ষ্য অবস্থান সম্পর্কিত $target.offset().topক্ষেত্রে, বেশিরভাগ ক্ষেত্রেই কাজটি করে। তবে দয়া করে সচেতন হন যে প্রত্যাবর্তিত মানটি htmlউপাদানটিতে কোনও সীমানা গ্রহণ করে না ( এই ডেমোটি দেখুন )। আপনার যে কোনও পরিস্থিতিতে টার্গেটের অবস্থানটি সঠিক হওয়ার প্রয়োজন হলে এটি ব্যবহার করা ভাল

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

এটি htmlউপাদানটিতে কোনও সীমানা সেট করা থাকলেও কাজ করে ।

— hashchange
সূত্র

8

অ্যানিমেশন:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

8

আপনি যদি কোনও ওভারফ্লো পাত্রে ( $('html, body')উপরে উত্তর পরিবর্তে পরিবর্তিত ) স্ক্রোল করতে চান তবে নিখুঁত অবস্থানের সাথেও কাজ করছেন, এটি করার উপায়:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

— FAjir
সূত্র

7

ডিভিডি আইডি লক্ষ্য করে পৃষ্ঠার স্ক্রোলটি অর্জনের সহজ উপায়

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

— ইরশাদ খান
সূত্র

6

জেনেরিক ক্লাস সিলেক্টর ব্যবহার করে আইডি এবং হ্রেফের বিমূর্তকরণের বিষয়টি আমার

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

স্নিপেট প্রসারিত করুন

— vascogaspar
সূত্র

6

কাস্টম jQuery প্লাগইন ব্যবহার করা খুব সহজ এবং সহজ। scroll=আপনার ক্লিকযোগ্য উপাদানটিতে কেবলমাত্র বৈশিষ্ট্যটি জুড়ুন এবং আপনি যে স্ক্রোল করতে চান তাতে তার মান সেট করুন।

যেমন: <a scroll="#product">Click me</a>। এটি যে কোনও উপাদান ব্যবহার করা যেতে পারে।

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

— DevWL
সূত্র

4

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

— kayz1
সূত্র

4

$('html, body').animate(...) আইফোন, অ্যান্ড্রয়েড ক্রোম সাফারি ব্রাউজারে আমার জন্য নয়।

আমি পৃষ্ঠাটির মূল বিষয়বস্তু উপাদান লক্ষ্য করতে হয়েছিল।

$ ( '# Cotnent')। সজীব (...)

এখানেই আমি শেষ করেছি

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

সমস্ত উপাদান সামগ্রী # কন্টেন্ট ডিভ দিয়ে সজ্জিত

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

— শাহাদাত
সূত্র

আপনার সত্যই ব্যবহারকারীর এজেন্ট স্নিফিং ব্যবহার করা উচিত নয়। webaim.org/blog/user-agent-string-history

— অ্যালেক্স পডওয়ার্নি

শব্দ-বিরতি যুক্ত করুন: ব্রেক-অল; আপনার সিএসএস উপাদান যা সমস্যায় আছে to অ্যান্ড্রয়েড / আইওএস ওয়েবভিউ jQuery.animate ({স্ক্রোলটপ: y}) অবস্থানটি ভুল। medium.com/@ellery.leung/...

— daliaessam

4

এটি অথর্বের উত্তর: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView থেকে । আপনার ডকুমেন্টটি যদি একটি আইফ্রেমে থাকে তবে কেবল যোগ করতে চেয়েছিলেন, আপনি ভিউ স্ক্রোল করার জন্য প্যারেন্ট ফ্রেমে কোনও উপাদান চয়ন করতে পারেন:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

— cynya
সূত্র

3

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

3

যখন ব্যবহারকারী # সাবজেক্টের সাহায্যে সেই ইনপুটটিতে ক্লিক করেন, পৃষ্ঠাটি একটি সুন্দর অ্যানিমেশন সহ পৃষ্ঠার শেষ উপাদানটিতে স্ক্রোল করা উচিত। এটি নীচে স্ক্রোল হওয়া উচিত শীর্ষে নয়।

পৃষ্ঠার শেষ আইটেমটি # সাবমিট সহ জমা দেওয়া বোতাম

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

এটি প্রথমে নীচে স্ক্রোল করবে #submit তারপরে কার্সারটিকে ক্লিক করা ইনপুটটিতে ফিরিয়ে আনতে, যা স্ক্রোলটি নকল করে এবং বেশিরভাগ ব্রাউজারগুলিতে কাজ করে। এটি jQuery প্রয়োজন হয় না কারণ এটি খাঁটি জাভাস্ক্রিপ্টে লেখা যেতে পারে।

focusচেইনিং focusকলগুলির মাধ্যমে আরও ভাল উপায়ে ফাংশন মিমিক অ্যানিমেশন ব্যবহারের এই ফ্যাশনটি কি সম্ভব ? আমি এই তত্ত্বটি পরীক্ষা করে দেখিনি, তবে এটি এমন কিছু দেখাচ্ছে:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

— Khaled.K
সূত্র

3

আমি একটি মডিউল স্ক্রোল-উপাদান সেট আপ npm install scroll-element। এটি এর মতো কাজ করে:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

নিম্নলিখিত এসও পোস্টগুলির সাহায্যে লিখিত:

কোডটি এখানে:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

— svnm
সূত্র

2

সম্পূর্ণ উপাদানটি দেখাতে (যদি বর্তমান উইন্ডো আকারের সাথে এটি সম্ভব হয়):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

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

2

আমি একটি সাধারণ উদ্দেশ্য ফাংশন লিখেছিলাম যা কোনও jQuery অবজেক্ট, সিএসএস নির্বাচক বা একটি সংখ্যার মানতে স্ক্রোল করে।

ব্যবহারের উদাহরণ:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

ফাংশনের কোড:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

— isapir
সূত্র

2

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

এটি লক্ষ্য উপাদানটির উচ্চতার একটি নকল ইনপুট তৈরি করে এবং তারপরে এটিতে একটি ফোকাস দেয় এবং ব্রাউজারটি আপনার যতগুলি স্ক্রোলযোগ্য শ্রেণিবদ্ধের মধ্যেই থাকুক না কেন বাকি বিষয়গুলি যত্ন নেবে। একটি যাদুমন্ত্র মত কাজ করে.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

— martinh_kentico
সূত্র

2

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

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

— ধ্রুবতারা
সূত্র

2

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

স্নিপেট প্রসারিত করুন

— Minguocode
সূত্র

2

এক রৈখিক

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

কোড স্নিপেট দেখান

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

<div class="foot">Some footer</div>

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র

1

এটি পুরোপুরি কাজ করে!

— jjoselon

1

2019 হিসাবে আপডেট উত্তর:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

— stardust4891
সূত্র

শরীরের জন্য আপনার এই নির্বাচক হওয়া উচিত: [ডকুমেন্ট.ডোকামেন্টএলমেন্ট, ডকুমেন্ট.বডি] এবং সমীকরণে কোনও দেহের অফসেটের দরকার নেই। $ ('# সাবজেক্ট')। অফসেট ()। শীর্ষ যথেষ্ট।

— ali6p