Jquery ব্যবহার করে একটি ডিভ স্ক্রোল করুন

205

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

আমি এখনও পর্যন্ত jquery এখানে

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

সমস্যাটি হ'ল এটি লোড হয়ে যাওয়ার পরে এটি স্বয়ংক্রিয়ভাবে পরিচিতি ডিভিতে যাচ্ছে, তারপরে আমি যখন #contactlinkমেনুতে টিপব তখন এটি শীর্ষে ফিরে স্ক্রোল করে।

সম্পাদনা: এইচটিএমএল

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />    

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>                       

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

সাহায্যের জন্য ধন্যবাদ

jquery scroll

— tshauck
সূত্র

যোগাযোগ লিঙ্কটি কোথায় হওয়া উচিত তার জন্য এইচটিএমএল দেখতে কেমন?

— জেমস ব্ল্যাক

এটি স্ট্যাকওভারফ্লো ডাব্লিকেট

— জেমস ব্ল্যাক

3

আপনি কি সরল পুরানো অ্যাঙ্করগুলির পরিবর্তে jQuery ব্যবহার করছেন এমন কোনও কারণ আছে?

— brianpeiris 8:51

2

@ জেমস - এটি আসলে একটি সদৃশ নয়। এই প্রশ্নটি একটি পৃষ্ঠাটিকে নির্দিষ্ট ডিভগুলিতে স্ক্রোল করে। এই প্রশ্নটি নির্ধারিত ইনক্রিমেন্টের দ্বারা কোনও পৃষ্ঠা স্ক্রল করে (ডিভগুলি কী দেখায় তা নির্বিশেষে)।

— পিটার আজতাই

এটি সত্যই ভাল: css-tricks.com/snippets/jquery/smooth-scrolling । আমার জন্য কাজ করেছেন।

— maahd

342

প্রথমত, আপনার contactকোডটিতে একটি ডিভ থাকে না, এতে একটি ডিভ থাকে contacts!

সাইডবারে আপনি contactপৃষ্ঠা আপনি নীচের অংশে অবস্থিত DIV আছে মধ্যে contacts। আমি sকোড নমুনার জন্য চূড়ান্ত অপসারণ । (আপনি projectslinkসাইডবারে আইডিটিও ভুল বানান লিখেছেন)।

দ্বিতীয়ত, jQuery রেফারেন্স পৃষ্ঠাতে ক্লিক করার জন্য কয়েকটি উদাহরণ দেখুন । object.click( function() { // Your code here } );কোনও ইভেন্ট ইভেন্ট হ্যান্ডলারকে অবজেক্টের সাথে আবদ্ধ করতে আপনাকে ক্লিকের মতো ব্যবহার করতে হবে .... নীচের আমার উদাহরণে লাইক দিন। সরাইয়া হিসাবে, আপনি কেবল কোনও বস্তুর উপর ক্লিককে ট্রিগার করতে পারেন যুক্তি ছাড়াই এটি ব্যবহার করে, পছন্দ করুন object.click()।

তৃতীয়ত, jQuery এর scrollToএকটি প্লাগইন । আপনার প্লাগ ইন ইনস্টল করা আছে কিনা তা আমি জানি না। আপনি scrollTo()প্লাগইন ব্যতীত ব্যবহার করতে পারবেন না । এই ক্ষেত্রে, আপনি যে কার্যকারিতাটি চান তা কেবল কোডের 2 টি লাইন, তাই আমি প্লাগইনটি ব্যবহার করার কোনও কারণ দেখতে পাচ্ছি না।

ঠিক আছে, এখন একটি সমাধান।

আপনি সাইডবারের কোনও লিঙ্কে ক্লিক করলে নীচের কোডটি সঠিক ডিভটিতে স্ক্রোল করবে। স্ক্রোলিংয়ের অনুমতি দেওয়ার জন্য উইন্ডোটি যথেষ্ট বড় হতে হবে:

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

সরাসরি উদাহরণ

~~(এখান থেকে নেওয়া ফাংশনে স্ক্রোল করুন )~~

পিএস: স্পষ্টতই আপনার অ্যাঙ্কর ট্যাগ ব্যবহার না করে এই পথে যেতে বাধ্য করার কারণ থাকতে হবে <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— পিটার আজতাই
সূত্র

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

— পিটার আজতাই

এটি প্রথম ক্লিকে স্ক্রোল করে না। : / আমি এটি দ্বিতীয়বার ক্লিক করি এবং এটি কার্যকর হয়।

— বুরাক করাকুş

আমি মনে করি যে এই জাতীয় আইডিকে

— গিনো

এটি প্রথম সময়ে কাজ করে না। তবে আমরা যখন দ্বিতীয়বার ক্লিক করি তখন এর কাজটি পুরোপুরি ঠিক।

— সতীশ সিং

115

.scrollTo()JQuery এ কোনও পদ্ধতি নেই তবে একটি পদ্ধতি রয়েছে .scrollTop()। .scrollTopএকটি পরামিতি প্রত্যাশা করে, অর্থাৎ পিক্সেল মান যেখানে স্ক্রোলবারটি স্ক্রোল করা উচিত।

উদাহরণ:

$(window).scrollTop(200);

উইন্ডোটি স্ক্রোল করবে (যদি এতে পর্যাপ্ত সামগ্রী থাকে)।

সুতরাং আপনি .offset()বা এই পছন্দসই মান পেতে পারেন .position()।

উদাহরণ:

$(window).scrollTop($('#contact').offset().top);

এটি #contactউপাদানটি দেখার জন্য স্ক্রোল করা উচিত ।

নন-জিকুয়ের বিকল্প পদ্ধতিটি .scrollIntoView()। আপনি যে কোনও পদ্ধতিতে এই পদ্ধতিটি কল করতে DOM elementপারেন:

$('#contact')[0].scrollIntoView(true);

trueইঙ্গিত দেয় যে উপাদানটি শীর্ষে অবস্থান করছে এবং falseএটি দেখার নীচে রাখবে। JQuery পদ্ধতির সাথে দুর্দান্ত জিনিসটি হল, আপনি এটি fx functionsপছন্দ মতো ব্যবহার করতে পারেন .animate()। সুতরাং আপনি কিছু মসৃণ করতে পারেন।

তথ্যসূত্র: .scrolTop () , অবস্থান () , .ফসেট ()

— jAndy
সূত্র

আমি আশঙ্কা করছি আমার এখনও একইরকম সমস্যা হচ্ছে। পৃষ্ঠাটি লোড পৃষ্ঠাটিকে একটি নির্দিষ্ট পরিমাণে স্ক্রল করে, যোগাযোগ ডিভ থো না, এবং লিঙ্কটি আমাকে যোগাযোগ ডিভিতেও নেয় না। ধন্যবাদ সম্পাদনা: বলুন আমি সিএসএসের সাহায্যে শীর্ষগুলি ব্যবহার করে ডিভগুলি ফাঁক করছি, এটির কারণে এটি ভুল জায়গায় চলে যাবে? শুধু একটি ভাবনা.

— ই

22

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

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

— আইটি ভ্লগস
সূত্র

13

এই সামান্য ফাংশন যুক্ত করুন এবং এটি হিসাবে ব্যবহার করুন: $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

— রায়ান
সূত্র

6

ওকে বলছি, এটি একটি ছোট সমাধান, তবে এটি কাজ করে।

মনে করুন নিম্নলিখিত কোড:

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

আপনি চান যখন যখন একটি নতুন পোস্ট 'the_div_holder' এ যুক্ত হবে তখন এটি তার অভ্যন্তরীণ সামগ্রী (ডিভের। পোষ্ট) চ্যাটের মতো শেষের দিকে স্ক্রোল করে। সুতরাং, যখনই একটি নতুন। পোষ্ট মূল ডিভ হোল্ডারে যুক্ত হবে তখন নিম্নলিখিতটি করুন:

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));

— খ্রীষ্টান
সূত্র

3

আপনি jQuery অবস্থান () পদ্ধতি দ্বারা কোনটি স্ক্রোল করতে চান তার আগে ডিভ উপাদানটির অবস্থান পান।
উদাহরণ: var pos = $ ("div")। অবস্থান ();
তারপরে "। টপ " পদ্ধতিতে সেই এলিমেন্টের y কর্ডিনেটস (উচ্চতা) পান ।
উদাহরণ: pos.top;
তারপরে "। বাম " পদ্ধতিতে সেই ডিভ উপাদানটির এক্স কর্ডিনেটগুলি পান ।
এই পদ্ধতিগুলি সিএসএস অবস্থান থেকে উত্পন্ন।
একবার আমরা এক্স & ওয়্যার কর্ডিনেটস পেয়ে গেলে আমরা জাভাস্ক্রিপ্টের স্ক্রোলটো () ব্যবহার করতে পারি ; পদ্ধতি।
এই পদ্ধতিটি নির্দিষ্ট উচ্চতা এবং প্রস্থ পর্যন্ত নথিকে স্ক্রোল করে।
এক্স ও ওয়াই কর্ডিনেট হিসাবে এটি দুটি পরামিতি নেয়। সিনট্যাক্স: উইন্ডো.স্ক্রোলটো (x, y);
তারপরে কেবল স্ক্রোলটো () ফাংশনে ডিআইভি উপাদানটির এক্স & ওয়্যার কর্ডিনেটগুলি পাস করুন ।
নীচের উদাহরণটি দেখুন the ↓

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>

— সাইয়েদ সালমান
সূত্র

এবং এই আপনি কি করেছেন তার কিছু পাঠ্য ব্যাখ্যা যুক্ত করুন, কেবল তেমন কিছু বোঝা যায় না .. !!

— ক্লেইন ডিসিলভা

@ ক্লেইনডসিলভা যেমন বলেছিল, দয়া করে কিছু পাঠ্য ব্যাখ্যা যুক্ত করুন।

— শ্রীঙ্কথজিএস

-1

এগুলি খুব বেশি দরকার নেই। শুধু কেবল যোগ DIV আইডি থেকে একটি <একটি> ট্যাগের সূরা

<li><a id = "aboutlink" href="#about">auck</a></li>

এটার মতই.

— আরমিন আখলাগ
সূত্র

দয়া করে এই বিষয়ে আরও আলোকপাত করুন। এটি আমার পক্ষে কাজ করে না।

— ইফেসিনাচি ব্রায়ান