কীভাবে jQuery ব্যবহার করে কোনও নোঙ্গরে পৃষ্ঠায় বা নীচে স্ক্রোল করবেন?

Question

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

আমি এমন কিছু চাই যেখানে আপনার মতো লিঙ্ক আছে:

<a href="#nameofdivetc">link text, img etc.</a>

সম্ভবত কোনও ক্লাস যুক্ত হয়েছে যাতে আপনি জানেন যে আপনি এই লিঙ্কটি স্লাইডিং লিঙ্ক হতে চান:

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

তারপরে যদি এই লিঙ্কটি ক্লিক করা হয়, পৃষ্ঠাটি প্রয়োজনীয় স্থানে উপরের দিকে বা নীচে স্লাইড হয় (একটি ডিভি, শিরোনাম, পৃষ্ঠার শীর্ষস্থানীয় ইত্যাদি)।

---

এর আগে আমার যা ছিল:

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});

Answer 1

বিবরণ

আপনি jQuery.offset()এবং ব্যবহার করে এটি করতে পারেন jQuery.animate()।

JsFizz বিক্ষোভ পরীক্ষা করে দেখুন ।

নমুনা

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

অধিক তথ্য

• jsFizz বিক্ষোভ
• jQuery.offset ()
• jQuery.animate ()

Comments

এই পৃষ্ঠায় সমস্ত অভ্যন্তরীণ অ্যাঙ্কর লিঙ্কগুলির সাথে কাজ করার জন্য জেনেরিকও করা যেতে পারে:$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });

— বারডো

@ বার্ডো, এটি বাস্তবায়নের কথা কীভাবে? আমি ডেকেম্যাকের সমাধানটি আপনার সাথে প্রতিস্থাপন করেছি, তবে স্লাইডিংটি নেই (অ্যাঙ্কর নিজেই কার্যক্ষম)। আমি কী মিস করছি?

— জাকব

history.pushState(null, null, dest);আপনি পূর্বনির্ধারিত অবস্থানের হ্যাশ পরিবর্তন রোধ করার সাথে সাথে বার্ডোও যুক্ত করুন

— মাইক কৌজার

অবগতির জন্য @ bardo এর সমাধান ছাড়াও, আপনি হ্যাশ যখন সর্বশেষ jQuery মত তাই ব্যবহার করে এটিকে অব্যাহতি উচিত, $ ( "একটি [সূরা ^ = \\ #]") stackoverflow.com/questions/7717527/...

— jaegs

এইচটিএমএল এবং বডি উভয়ই অ্যানিমেট করার উদ্দেশ্য কী? এমন পরিস্থিতি দেখে মনে হচ্ছে যেখানে আমরা জানি না আমরা কী করি এবং কেবল এটিই করি। এই একাধিক স্কোলিং শুরু হতে পারে?

— ygoe

Answer 2

বলা যাচ্ছে যে আপনার সূরা অ্যাট্রিবিউটে একটি লিঙ্ক করা হয় DIV আছে ট্যাগ দিয়ে আইডি একই নামের (যথারীতি), আপনি এই কোড ব্যবহার করতে পারেন:

এইচটিএমএল

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

জাভাস্ক্রিপ্ট - (জ্যাকারি)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});

Comments

খুব সহজ তবে শক্তিশালী সমাধান, এটি সম্পূর্ণ নিয়ন্ত্রণের অনুমতি দেয়। আমি মনে করি এই উত্তরটি আরও উত্সাহ পাওয়া উচিত।

— ক্রোনিফাই করুন

সম্মত, এটি সেরা সমাধান এবং আমাকে অনেক সাহায্য করেছে

— সম্ভবত

এটি কাজ করে তবে ব্যবহারের উদ্দেশ্যকে পরাস্ত করে name। আপনি যখন ব্যবহার করেন <a name="something"></a>, আপনি বাইরে থেকেও এটি উল্লেখ করতে পারেন তবে আপনার সমাধানটি এটি সরবরাহ করে না।

— রামটিন

Answer 3

এটি আমার জীবনকে এত সহজ করে তুলেছিল। আপনি মূলত প্রচুর কোড ছাড়াই আপনার উপাদানগুলির আইডি ট্যাগ এবং এর স্ক্রোলগুলিতে রেখে যান

http://balupton.github.io/jquery-scrollto/

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

$('#scrollto1').ScrollTo();

আপনার এইচটিএমএলে

<div id="scroollto1">

আমি এখানে পৃষ্ঠার সমস্ত উপায়

Answer 4

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}

Comments

আসল প্রশ্ন, দ্বিতীয় লাইনে + "কি কিছু করা যায়?

— রব

@Rob জাভাস্ক্রিপ্ট স্ট্রিং ক্ষেপক নেই, তাই ব্যবহার +স্ট্রিং সহ বা Vars যোগসূত্র তাদের মত: "#some_anchor"। সত্যই, দ্বিতীয় কনক্টের anchor_id + ""দরকার নেই, আমি বিশ্বাস করি।

— ওব্রী

ধন্যবাদ @ অ্যানব্রি এটি দ্বিতীয় সমঝোতা যা আমি নিয়ে ভাবছিলাম :)

— রব

Answer 5

আপনার লক্ষ্য করা উচিত যে লক্ষ্যটির একটি প্যাডিং রয়েছে এবং এর positionপরিবর্তে এটি ব্যবহার করুন offset। আপনি লক্ষ্যটি ওভারল্যাপিং করতে চান না এমন কোনও সম্ভাব্য নেভ বারের জন্যও অ্যাকাউন্ট করতে পারেন।

const $navbar = $('.navbar');

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

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})

Comments

সেরা সমাধান আইএমএইচও করুন কারণ এটির জন্য অতিরিক্ত ক্লাস এবং বিরক্তিকর প্যাডিং গণিতের স্থির নববারের জন্য দরকার নেই

— কেএসপিআর

তবে এটি url এ অ্যাঙ্কর ট্যাগটি পুনরায় লিখতে পারে না। history.pushState({}, "", this.href);Url আপডেট রাখতে যোগ করুন

— KSPR

Answer 6

তাত্ক্ষণিকভাবে লাফানোর পরিবর্তে এম্বেড হওয়া সমস্ত অ্যাঙ্কর লিংক স্লাইডকে জিকুয়েরির সাথে আমার দৃষ্টিভঙ্গি

এটি সান্টি নুনেজের উত্তরের মতোই তবে এটি আরও নির্ভরযোগ্য ।

সমর্থন

• মাল্টি ফ্রেমওয়ার্ক পরিবেশ।
• পৃষ্ঠাটি লোড শেষ হওয়ার আগে।

<a href="#myid">Go to</a>
<div id="myid"></div>

// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);

Answer 7

আমি আমার মূল কোডটির সাথে আটকেছি এবং এই কোডটি ব্যবহার করতে 'ব্যাক-টু-টপ' লিঙ্কে একটি বিবর্ণও অন্তর্ভুক্ত করেছি এবং এখান থেকেও কিছুটা:

http://webdesignerwall.com/tutorials/animated-scroll-to-top

ভাল কাজ করে :)

Answer 8

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

যেমন:

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

Answer 9

এসএস স্লো স্ক্রোল

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

ss="about" আপনাকে নিয়ে যায় id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});

.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

বেহালা

https://jsfiddle.net/Hastig/stcstmph/4/

Answer 10

সমাধানটি আমার পক্ষে কাজ করেছে Here এটি একটি জেনেরিক ফাংশন যা aএকটি নাম উল্লেখ করে সমস্ত ট্যাগের জন্য কাজ করেa

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

দ্রষ্টব্য 1: নিশ্চিত হয়ে নিন যে আপনি "আপনার এইচটিএমএলে ডাবল উদ্ধৃতি ব্যবহার করেছেন । আপনি যদি একক উদ্ধৃতি ব্যবহার করেন তবে কোডের উপরের অংশটি পরিবর্তন করুনvar target = $("a[name='" + name.substring(1) + "']");

দ্রষ্টব্য 2: কিছু ক্ষেত্রে, বিশেষত আপনি যখন বুটস্ট্র্যাপ থেকে স্টিকি বার ব্যবহার করেন, নামটি aনেভিগেশন বারের নীচে লুকিয়ে রাখবে। এই ক্ষেত্রে (বা অন্য কোনও অনুরূপ ক্ষেত্রে), অনুকূল অবস্থান অর্জনের জন্য আপনি আপনার স্ক্রোল থেকে পিক্সেলের সংখ্যা হ্রাস করতে পারেন। উদাহরণস্বরূপ: $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');আপনি চলে যাবেন target15 পিক্সেল উপরে বাম সঙ্গে।

Answer 11

আমি এই উদাহরণটি https://css-tricks.com/snippets/jquery/smooth-scrolling/ এ কোডের প্রতিটি লাইন ব্যাখ্যা করে হোঁচট খেয়েছি। আমি এটি সেরা বিকল্প হিসাবে খুঁজে পেয়েছি।

https://css-tricks.com/snippets/jquery/smooth-scrolling/

আপনি স্থানীয় যেতে পারেন:

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

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

বা jquery সহ:

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    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) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

Answer 12

ঠিক আছে সবচেয়ে সহজ পদ্ধতি: -

ক্লিক ফাংশনের মধ্যে (জ্যাকারি): -

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

এইচটিএমএল

<div id="resultsdiv">Where I want to scroll to</div>

Answer 13

$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

এটি এখানে পরীক্ষা করুন:

http://jsbin.com/ucati4

Comments

দয়া করে স্বাক্ষরগুলি অন্তর্ভুক্ত করবেন না, বিশেষত লিঙ্কগুলির সাথে ... এবং বিশেষত সম্পর্কিত সম্পর্কযুক্ত লিঙ্কগুলির সাথে। আপনি নিজের প্রোফাইলে এই ধরণের জিনিস রাখতে পারেন।

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

প্রশ্নটি কীভাবে পৃষ্ঠার শীর্ষে স্ক্রোল করবেন তা নয়, এটি কীভাবে একটি আইডি সহ একটি অ্যাঙ্কারে স্ক্রোল করবেন

— ইউজার 1380540

আমি ওয়ার্ডপ্রেসে এটি ব্যবহার করার কোনও উপায় আছে? আমার সাইটে যুক্ত করছি তবে এটি কার্যকরভাবে কাজ করে না। এখানে লিঙ্কটি: scentology.burnnotice.co.za

— ব্যবহারকারী এজেন্ট

Answer 14

নিম্নলিখিত সমাধানটি আমার পক্ষে কাজ করেছে:

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

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