ডিভি আইডি jQuery থেকে মসৃণ স্ক্রোল

Question

সঠিকভাবে কাজ করার জন্য আমি ডিভিডি আইডি jquery কোডে একটি স্ক্রোল পাওয়ার চেষ্টা করেছি। অন্য স্ট্যাক ওভারফ্লো প্রশ্নের উপর ভিত্তি করে আমি নিম্নলিখিতটি চেষ্টা করেছি

ডেমো http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

তবে এটি কার্যকর হয়নি। এটি কেবল ডিভের দিকে স্ন্যাপ করে। আমিও চেষ্টা করেছি

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

কোন অগ্রগতি নেই।

Comments

আপনি কি এই দিকে তাকিয়েছেন? stackoverflow.com/questions/3432656/…

— দ্য ভ্যানিলা থ্রিলা

@ দ্য ভ্যানিলা থ্রিলা আমি করেছিলাম তবে একক লিঙ্ক ব্যবহারের জন্য এটি খুব বেশি ফুলে

— উঠেছে

@ স্টিভেনপিএইচপি, আমি আমার উত্তর stackoverflow.com/a/26129950/947687 অনুসারে আপনার উদাহরণে জাভাস্ক্রিপ্ট কোডটি প্রতিস্থাপন করেছি । এবং এটি jsfiddle.net/8tLdq/643 কাজ করে ।

— dizel3d

ওপিটি পুরানো তবে এসই থেকে আসা অন্যদের জন্য আমি এই পোস্টটি ভাগ করব। এখানে একটি নিবন্ধ যা সমস্যার সমাধান করার জন্য একটি সাধারণ ফাংশন ভাগ করে নেবে: smartik.ws/2015/01/…

— অ্যান্ড্রু সুরডু

Answer 1

আপনার এনিমেট করা দরকার html, body

ডেমো http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

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

Comments

@ ভেক্টর আমার একটি সমস্যা আছে, একবার এটি ক্লিক করা হলে আমাকে jquery এর সাথে লড়াই করতে হবে স্ক্রোল আপ করতে, কোনও সমাধান?

— YesItsMe

@ আইসিতসমে ... আমার ক্ষেত্রে উপরে বা নিচে

— ধূসর বর্ণালী

@ গ্রেস্পেকট্রাম আপ, ক্লিক করার ঠিক পরে, শোনা যাচ্ছে যে কোনও বিলম্ব হয়েছে।

— YesItsMe

আমার একই প্রশ্ন রয়েছে, আমার যদি কয়েকটি বোতাম রয়েছে যা বিভিন্ন স্থানে স্ক্রোল করা দরকার, এই কোডটি সংশোধন করার চেষ্টা করেছিলাম তবে এটি কার্যকর হয় না what আপনি দয়া করে অন্য উদাহরণ প্রদান করতে পারেন?

— ড্রেডলর্ড

এর জন্য কিছু "ফিক্স" পাওয়া গেছে। যথাযথ উপাদানটির স্ক্রোলিং এখন ঠিক করা হয়েছে, কিন্তু তবুও এটি একই "স্ক্রোল-টু" টার্গেটের উপর ক্লিক করে উপরে এবং নীচে যায়: var target = $(this).data("target"); $(".basics-content").animate({scrollTop: $(target).offset().top}, 1000); });ব্যাখ্যা: আমি আইডি নম্বরটি সরবরাহ করে .basics-contentসেই মডেলের অভ্যন্তরীণ ডিভ যা আমি আসলে স্ক্রোল করতে চাই want targetউপাদানটির ...

— রোল্যান্ড

Answer 2

আপনি যদি মসৃণ স্ক্রোলিংয়ের জন্য এইচটিএমএল মার্কআপটি পরিবর্তন না করেই পৃষ্ঠাতে মানক href-id নেভিগেশন ওভাররাইড করতে চান তবে এটি ব্যবহার করুন ( উদাহরণস্বরূপ ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

Comments

এই ভাল কাজ করে, আমি একটি খুব ছোট খামচি সুপারিশ করতে পারি var pos = $(id).offset().top;হতে পারেvar pos = $id.offset().top;

— ডেভি

খুব সুন্দর. আপনি যদি কেবলমাত্র কিছু নির্দিষ্ট লিঙ্কগুলিতে এটি ঘটতে চান (বলুন আপনার কাছে কিছু তথ্য প্রদর্শন বা আড়াল করার জন্য রয়েছে), কেবল তাদের একটি শ্রেণির নাম যুক্ত করুন এবং ম্যাচের ঘোষণার শেষে আপনার শ্রেণীর নামটি (স্ক্রোলার বলুন) পরীক্ষা করুন (যেমন একটি [href ^ = "#"]। স্ক্রোলার)।

— বেসরকারী

আপনি কীভাবে jQuery ছাড়া করবেন?

— ভাদোরকোয়েস্ট

Answer 3

এখানে আমার 2 সেন্ট:

javascript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

এইচটিএমএল:

<a class="scroll" target="contact">Contact</a>

এবং লক্ষ্য:

<h2 id="contact">Contact</h2>

Comments

আপনি ডক্টেপ না ঘোষণা করলেই এই সিমগুলি কাজ করে।

— ডেভিড মার্টিনস

ব্যবহার কি evalএর জন্য এখানে?

— দেখেন

আমি মনে করি এটি $('html, body').animateস্ক্রোল করা প্রয়োজন

— ইরশাদ খান

Answer 4

আমি যা ব্যবহার করি তা এখানে:

<!-- jquery smooth scroll to id's -->   
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});
</script>

এর সাথে সৌন্দর্য হ'ল আপনি প্রতিটি জন্য একটি নতুন স্ক্রিপ্ট না চালিয়ে সীমাহীন সংখ্যক হ্যাশ-লিঙ্ক এবং সম্পর্কিত আইডি ব্যবহার করতে পারেন।

আপনি যদি ওয়ার্ডপ্রেস ব্যবহার করছেন footer.phpতবে ক্লোজড বডি ট্যাগের ঠিক আগে আপনার থিমের ফাইলে কোডটি সন্নিবেশ করুন</body> ।

থিম ফাইলগুলিতে আপনার অ্যাক্সেস না থাকলে আপনি পোস্ট / পৃষ্ঠা সম্পাদকের ঠিক ভিতরে কোড এম্বেড করতে পারেন (আপনাকে অবশ্যই পাঠ্য মোডে পোস্টটি সম্পাদনা করতে হবে) বা একটি পাঠ্য উইজেটে যা সমস্ত পৃষ্ঠায় লোড হবে।

আপনি যদি অন্য কোনও সিএমএস বা কেবল এইচটিএমএল ব্যবহার করেন তবে আপনি কোডটি এমন একটি অংশে সন্নিবেশ করতে পারেন যা ক্লোজিং বডি ট্যাগের ঠিক আগে সমস্ত পৃষ্ঠায় লোড হয় </body>।

আপনার যদি এই সম্পর্কে আরও বিশদ প্রয়োজন হয় তবে আমার দ্রুত পোস্টটি এখানে দেখুন: আইপি থেকে jQuery স্মুথ স্ক্রোল

আশা করি এটি সহায়তা করে এবং আপনার যদি এ সম্পর্কে কোনও প্রশ্ন থাকে তবে আমাকে জানান।

Comments

এটি কতটা সহজ এবং ভ্যানিলা, নিখুঁত L

— DoPeT

Answer 5

আরও একটি উদাহরণ:

এইচটিএমএল লিঙ্ক:

<a href="#featured" class="scrollTo">Learn More</a>

জাতীয়:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

এইচটিএমএল অ্যাঙ্কর:

  <div id="featured">My content here</div>

Answer 6

আপনি কি নিশ্চিত যে আপনি jQuery স্ক্রোলটি প্লাগইন ফাইলটি লোড করছেন?

আপনি কোনও বস্তু পেয়ে যাচ্ছেন: কনসোলে পদ্ধতিটি "স্ক্রোলটো" ত্রুটিটি পাওয়া যায় নি।

স্ক্রোলটিও পদ্ধতিটি কোনও স্থানীয় জেকারি পদ্ধতি নয়। এটি ব্যবহারের জন্য আপনাকে jquery স্ক্রোলটি প্লাগইন ফাইলটিতে অন্তর্ভুক্ত করতে হবে।

রেফ: http://flesler.blogspot.in/2009/05/jqueryscrolto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrolto.html

দ্রাবক: মাথা বিভাগে এটি যুক্ত করুন।

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Comments

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। প্রশ্নের কোডটি সঠিক, এবং সূক্ষ্মভাবে কাজ করে। দেখে মনে হচ্ছে স্ক্রোলটো প্লাগইনটি কাজ করছে না / করছে না। । । তিনি অনুরূপ কিছু করার বিভিন্ন উপায় সম্পর্কে জিজ্ঞাসা করেননি।

— ক্রিস কাভানাঘ

Answer 7

এই স্ক্রিপ্টটি ভেক্টরের স্ক্রিপ্টের উন্নতি। আমি এতে কিছুটা পরিবর্তন করেছি। সুতরাং এই স্ক্রিপ্ট এতে ক্লাস পৃষ্ঠা-স্ক্রোল সহ প্রতিটি লিঙ্কের জন্য কাজ করে।

প্রথমে সহজ না করে:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

শিথিল করার জন্য আপনার জ্যাকুরি ইউআই দরকার হবে:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

এটি স্ক্রিপ্টে যুক্ত করুন:

'easeOutExpo'

চূড়ান্ত

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

সমস্ত সহজলভ্যতা আপনি এখানে পাবেন: ঠকানো শীট ।

Answer 8

এই কোডটি ওয়েবে যে কোনও অভ্যন্তরীণ লিঙ্কের জন্য কার্যকর হবে

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

Answer 9

এটি সাধারণ জেএসে করা যেতে পারে:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

ব্রাউজার সমর্থন কিছুটা সমস্যা, তবে আধুনিক ব্রাউজারগুলি এটি সমর্থন করে ।

Answer 10

আপনি নিম্নলিখিত সহজ jQuery কোড ব্যবহার করে এটি করতে পারেন।

টিউটোরিয়াল, ডেমো এবং উত্স কোডটি এখান থেকে পাওয়া যাবে - jQuery ব্যবহার করে ডিমে স্মুথ স্ক্রোল

javascript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

এইচটিএমএল:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

Answer 11

এখানে আমি এটি চেষ্টা করেছি, এটি আমার পক্ষে দুর্দান্ত কাজ।

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

এইচটিএমএল:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

Comments

আপনার উত্তরে কি আলাদা?

— yunandtidus

Answer 12

এটি সর্বাধিক সরল।সোর্স- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Answer 13

এটি আমার কাজ করে।

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

ধন্যবাদ।

Answer 14

আপনার স্থির শিরোনাম যাতে এটির নীচে স্ক্রোল না করে তবে jQuery ব্যবহার করে ডিভ / অ্যাঙ্কারে স্ক্রোলটি মসৃণ করার জন্য আমার সমাধান এখানে। এছাড়াও আপনি এটি অন্য পৃষ্ঠা থেকে লিঙ্ক করলে এটি কাজ করে।

আপনার শিরোনামটি কেবল ডিভের জন্য ".সাইট-হেডার" প্রতিস্থাপন করুন।

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

  if (target.length) {
    $('html, body').animate({
      scrollTop: (target.offset().top - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});