আমি jquery ব্যবহার করে কীভাবে পৃষ্ঠায় একটি নির্দিষ্ট স্থানে স্ক্রোল করতে পারি?

Question

JQuery ব্যবহার করে পৃষ্ঠার নির্দিষ্ট কোনও স্থানে স্ক্রোল করা কি সম্ভব?

আমি যে অবস্থানটি করতে স্ক্রোল করতে চাই তা কি তা থাকতে পারে:

<a name="#123">here</a>

অথবা এটি কেবল একটি নির্দিষ্ট ডিওএম আইডিতে স্থানান্তর করতে পারে?

Comments

কেবলমাত্র একটি ছোট নোট:

— এক্সটিএমএল

আকর্ষণীয় প্রশ্ন, স্ক্রোল করার জন্য পৃষ্ঠা সমন্বয়গুলি ব্যবহার করতে পারবেন না? আমি মনে করি আমাদের সক্ষম হওয়া উচিত।

— ওমর আবিদ

আমি আপনার প্রয়োজন অনুরূপ সমাধান পেয়েছিলাম [এখানে] [1] [1]: stackoverflow.com/questions/3432656/...

— user1493023

@ মিঃব্লঃ আপনার সমস্যার সমাধান কি?

— মেঘদাদ হাদিদি

Answer 1

jQuery স্ক্রোল প্লাগইন

যেহেতু এটি jquery এর সাথে ট্যাগ করা একটি প্রশ্ন তাই আমাকে বলতে হবে যে এই লাইব্রেরিতে মসৃণ স্ক্রোলিংয়ের জন্য খুব সুন্দর প্লাগইন রয়েছে, আপনি এটি এখানে খুঁজে পেতে পারেন: http://plugins.jquery.com/scrolTo/

ডকুমেন্টেশন থেকে অংশগুলি:

$('div.pane').scrollTo(...);//all divs w/class pane

অথবা

$.scrollTo(...);//the plugin will take care of this

স্ক্রোলিংয়ের জন্য কাস্টম jQuery ফাংশন

আপনি আপনার কাস্টম স্ক্রোল jquery ফাংশনটি সংজ্ঞায়িত করে খুব লাইটওয়েট পদ্ধতির ব্যবহার করতে পারেন

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

এবং এটি ব্যবহার করুন:

$('#your-div').scrollView();

পৃষ্ঠার স্থানাঙ্কে স্ক্রোল করুন

অ্যানিমেট htmlএবং bodyউপাদান scrollTopবা scrollLeftবৈশিষ্ট্য সহ

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

সরল জাভাস্ক্রিপ্ট

সাথে স্ক্রোলিং window.scroll

window.scroll(horizontalOffset, verticalOffset);

কেবলমাত্র যোগফল হিসাবে, আইডি সহ উপাদানটিতে যেতে উইন্ডো.লোকেশন.হ্যাশ ব্যবহার করুন

window.location.hash = '#your-page-element';

সরাসরি এইচটিএমএল (অ্যাক্সেসিবিলিটি উন্নতি)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Comments

ধন্যবাদ @ জুরজ ব্লাহুনকা, তবে আমি কোনও প্লাগইন ছাড়াই এটি করি

— মেঘাদাদ হাদিদি

লিঙ্কটি আমাকে স্ক্রোলটোতে নিচ্ছে না । আপনি এটি আপডেট করতে পারেন দয়া করে?

— বারনা টেকসে

এই উত্তর হওয়া উচিত!

— নীলমেগ

Answer 2

হ্যাঁ, এমনকি সরল জাভাস্ক্রিপ্টে এটি বেশ সহজ। আপনি কোনও উপাদানকে একটি আইডি দেন এবং তারপরে আপনি এটিকে "বুকমার্ক" হিসাবে ব্যবহার করতে পারেন:

<div id="here">here</div>

আপনি যদি চান যে কোনও লিঙ্কে ক্লিক করার সময় এটি যদি সেখানে স্ক্রোল হয় তবে আপনি কেবল চেষ্টা করা-সত্য পদ্ধতিটি ব্যবহার করতে পারেন:

<a href="#here">scroll to over there</a>

প্রোগ্রামগতভাবে এটি করতে, ব্যবহার করুন scrollIntoView()

document.getElementById("here").scrollIntoView()

Comments

@ নিকফ এটি সর্বত্র সর্বত্র সমর্থিত নয়। caniuse.com/#search=scrolIntoView

— আদিত্য সিং

এই ডিএফ সমর্থিত ( বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেট / স্ক্রোলআইন্টো ভিউ )। ভাবেন আপনি ক্যানিয়াসটি সঠিকভাবে পড়েন নি। তবে অ্যানিমেটেড হবে না won't বরং একটি দুর্দান্ত আকস্মিক লাফ যা সর্বদা দুর্দান্ত নয়।

— পেরি

Answer 3

কোনও প্লাগইন ব্যবহার করার দরকার নেই, আপনি এটি এটি করতে পারেন:

var divPosition = $('#divId').offset();

তারপরে নির্দিষ্ট ডিওমে ডকুমেন্টটি স্ক্রোল করতে এটি ব্যবহার করুন:

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Comments

+1 এটি সম্ভবত সেরা উত্তর। বেশি কোড নয় এবং একটি প্লাগইন প্রয়োজন হয় না।

— ট্রিকি 12

নোট করুন যে আপনার উইন্ডো রিসাইজে অফসেটটি পুনরায় গণনার প্রয়োজন হতে পারে।

— বার্ট বার্গ

@ বার্টবার্গের ভাল পয়েন্ট-- বা .animateকলটি হওয়ার ঠিক আগে

— পুনরায় গণনা করুন

সহজ উত্তর পছন্দ। কেন মানুষ এত জটিল জিনিস তৈরি করতে হবে? আর একটি প্লাগইন চাই না।

— sterfry68

সত্যই সেরা উত্তর।

— রবার্ট রস

Answer 4

এখানে একটি খাঁটি জাভাস্ক্রিপ্ট সংস্করণ রয়েছে:

location.hash = '#123';

এটি স্বয়ংক্রিয়ভাবে স্ক্রোল করব। "#" উপসর্গটি যুক্ত করতে ভুলবেন না।

Comments

নামকরণকৃত অ্যাঙ্কারের আদিম উপায়টি ব্যবহার করে, আপনার ইউআরএল থাকতে পারে যার মধ্যে হ্যাশ Eg mywebsite.com/page-about/#123 বুকমার্কিংয়ে হ্যাশ + স্ক্রোলিনটোভিউ আচরণও অন্তর্ভুক্ত রয়েছে।

— ঠিক আছে

আপনি যদি কিছুটা ব্যাখ্যা করতে পারেন তবে দুর্দান্ত হবে

— JGallardo

Answer 5

সরল জাভাস্ক্রিপ্ট:

window.location = "#elementId"

Answer 6

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

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

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

Answer 7

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Comments

আপনি যদি আপনার কোডটিতে কিছু মন্তব্য যুক্ত করেন তবে দুর্দান্ত হবে। কীভাবে এটি প্রশ্নকারীকে তাদের প্রশ্ন সমাধানে সহায়তা করে?

— আর্টেমিক্স

Answer 8

এটা চেষ্টা কর

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

Answer 9

এখানে @ জুরাজ-ব্লাহুঙ্কার হালকা ওজনের পদ্ধতির বৈকল্পিক । এই ফাংশনটি ধারকটি নথি নয় এবং আইটেমটি দেখার বাইরে থাকলে কেবল স্ক্রোলগুলি ধরে নেয় না। অযৌক্তিক বাউন্স এড়াতে অ্যানিমেশন কুইংও অক্ষম করা আছে।

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};

Comments

আমার কাছে বাউন্স ইস্যু ছিল, তবে আপনার পদ্ধতিটি কাজ করে না

— আনন

Answer 10

নির্দিষ্ট আইস কনসোল ত্রুটি সহ, jquery.easing.min.js ব্যবহার করে

এইচটিএমএল

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

jQuery

//jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js
        $(window).scroll(function () {
            if ($(".navbar").offset().top > 50) {
                $(".navbar-fixed-top").addClass("top-nav-collapse");
            } else {
                $(".navbar-fixed-top").removeClass("top-nav-collapse");
            }
        });
        //jQuery for page scrolling feature - requires jQuery Easing plugin
        $(function () {
            $('a.page-scroll').bind('click', function (event) {
                var anchor = $(this);
                if ($(anchor).length > 0) {
                    var href = $(anchor).attr('href');
                    if ($(href.substring(href.indexOf('#'))).length > 0) {
                        $('html, body').stop().animate({
                            scrollTop: $(href.substring(href.indexOf('#'))).offset().top
                        }, 1500, 'easeInOutExpo');
                    }
                    else {
                        window.location = href;
                    }
                }
                event.preventDefault();
            });
        });

Comments

এটি এই জাতীয় কোনও সহজ কাজের জন্য অনেক বেশি কোড। location.hash = 'idOfElement';পর্যাপ্ত হওয়া উচিত

— কলব ক্যানিয়ন

Answer 11

scroll-behavior: smooth;জাভাস্ক্রিপ্ট ছাড়াই এটি করতে আপনি ব্যবহার করতে পারেন

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Comments

স্ক্রোল-আচরণ: মসৃণ; ব্রাউজার সামঞ্জস্যপূর্ণ সম্পত্তি নয়।

— সুপার মডেল

লিঙ্কটিতে ব্রাউজারের সামঞ্জস্যতাটি নীচে দেখুন - developer.mozilla.org/en-US/docs/Web/CSS/…

— সায়রাম

আপনার লিঙ্কগুলিতে হ্যাঁ প্রদত্ত টেবিলটি দেখাচ্ছে: এজ, আইই এবং সাফারি এই সম্পত্তিটির সাথে সামঞ্জস্য নয়।

— সুপার মডেল