অ্যাঙ্কর লিঙ্কে ক্লিক করার সময় মসৃণ স্ক্রোলিং

487

আমার পৃষ্ঠায় আমার বেশ কয়েকটি হাইপারলিংক রয়েছে। একটি FAQ যা ব্যবহারকারীরা যখন আমার সহায়তা বিভাগে যান তখন তারা পড়তে পারে।

অ্যাঙ্কর লিঙ্কগুলি ব্যবহার করে, আমি পৃষ্ঠাটি অ্যাঙ্কারের দিকে স্ক্রোল করতে এবং সেখানকার ব্যবহারকারীদের গাইড করতে পারি।

সেই স্ক্রোলিংটি মসৃণ করার কোনও উপায় আছে কি?

তবে লক্ষ্য করুন যে তিনি একটি কাস্টম জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করছেন। হয়তো jQuery কিছু বেকিং এর মতো কিছু অফার করে?

javascript  jquery  scroll  hyperlink  anchor 
— শুধু বলিভিয়ান এখানে
সূত্র
আপনি দয়া করে সেরা উত্তর পর্যালোচনা করতে পারেন? : বিশুদ্ধ CSS এক লাইন সমাধান সব ভারী jQuery পরামর্শ মধ্যে খুঁজে পাওয়া কঠিন হয় stackoverflow.com/a/51588820/1422553
— Александр Киричек

উত্তর:

1158

এপ্রিল 2018 আপডেট করুন: এটি করার একটি নেটিভ উপায় এখন রয়েছে :

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

এটি বর্তমানে সর্বাধিক রক্তক্ষরণ প্রান্ত ব্রাউজারগুলিতে সমর্থিত।

পুরানো ব্রাউজার সমর্থনের জন্য, আপনি এই jQuery কৌশলটি ব্যবহার করতে পারেন:

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

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

এবং এখানে টিউমারটি: http://jsfiddle.net/9SDLw/

যদি আপনার লক্ষ্য উপাদানটির কোনও আইডি না থাকে এবং আপনি এটির সাথে এটি যুক্ত করে থাকেন তবে এটি nameব্যবহার করুন:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

বর্ধিত পারফরম্যান্সের জন্য, আপনাকে সেই $('html, body')নির্বাচককে ক্যাশে করা উচিত , যাতে প্রতিটি সময় কোনও অ্যাঙ্কর ক্লিক করা চলবে না :

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

আপনি যদি ইউআরএল আপডেট করতে চান তবে animateকলব্যাকের মধ্যে এটি করুন :

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});
— জোসেফ সিলবার
সূত্র
10
এটি ইউআরএল থেকে # এক্সটেনশনটি সরিয়ে ফেলা বলে মনে হচ্ছে, পিছনের কাজটি ভাঙ্গা। এই সমস্যা এড়ানোর একটি উপায় আছে কি?
— ফ্লেচ
2
@ জোসেফসিলবারের scrollTop: $(this.hash).offset().topপরিবর্তে এটি হওয়া উচিত নয় scrollTop: $(this.href).offset().top?
— গ্রেগরি পাকোস
4
@ ক্রিয়েটসিয়ান -scrollTop: $(href).offset().top - 72
— জোসেফ সিলবার
5
আমি যুক্তি দেব যে html, bodyএখানে অবজেক্টের ক্যাশে করা অপ্রয়োজনীয়, প্রতি ক্লিকে একবার নির্বাচক চালানো আসলে তেমন কিছু নয়।
2
প্রথম সমাধান সবচেয়ে ভাল এবং সবচেয়ে আধুনিক, আপনি এই সঙ্গে পুরাতন ব্রাউজারে এই আচরণ সমর্থন করার জন্য এই polyfill ব্যবহার করতে পারেন polyfill
— Efe
166

সঠিক বাক্য গঠনটি হ'ল:

//Smooth scrolling with links
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().‌​top}, 500);
});

সরলকরণ : DRY

function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().​top}, 500);
}
$('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

এর ব্যাখ্যা href*=\\#:

  • *এর অর্থ এটি চারটির সাথে মেলে #। এইভাবে শুধুমাত্র অ্যাঙ্কারগুলি মিলবে । এর অর্থ সম্পর্কে আরও জানতে এখানে দেখুন
  • \\কারণ এটি #সিএসএস নির্বাচকের একটি বিশেষ চর, তাই আমাদের এড়াতে হবে।
— অ্যান্ড্রেস সেপার
সূত্র
8
আমাকে কেবল অ্যাঙ্কর ইউআরএল পরিবেশন $('a')করতে $('a[href*=#]')হয়েছিল
— ই
2
@ ওকলিভ এটি খুব বেশি পরিবেশন করবে, উদাহরণস্বরূপ একটি জাভাস্ক্রিপ্ট লিঙ্কের মতো <a href="javascript:$('#test').css('background-color', '#000')">Test</a>। পরিবর্তে $('a[href^=#]')হ্যাশ চরিত্রের সাথে শুরু হওয়া সমস্ত url- এর সাথে মিল রাখতে আপনার ব্যবহার করা উচিত ।
— মার্টিন ব্রাউন
3
এছাড়াও, '#' একটি বিশেষ চরিত্র এবং এটি এর থেকে পালাতে হবে:a[href^=\\#]
— কুইনফ্রিডম্যান
3
এটি অন্য পৃষ্ঠাগুলিতে অ্যাঙ্করগুলির লিঙ্কগুলি কাজ বন্ধ করে দেয়। ($ (। (এটি.হ্যাশ)। নির্বাচনকারী)। দৈর্ঘ্য) condition ... মসৃণ স্ক্রোল যুক্ত করে শর্তযুক্ত। }
— লিরেন
1
নতুন পৃষ্ঠায় প্রথম ভ্রমণের সময় আমি কীভাবে এনিমেট করতে পারি? উদাহরণস্বরূপ: Website.com/newpage/#section2 এ ক্লিক করে। আমি পৃষ্ঠাটি লোড করতে চাই এবং তারপরে নীচে স্ক্রোল করব। এটা কি সম্ভব?
— সামায়ার
72

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

html{scroll-behavior:smooth}

এর পরে কোনও ডিভের দিকে নির্দেশিত যে কোনও লিঙ্কগুলি সহজেই সেই বিভাগগুলিতে চলে যাবে।

<a href="#section">Section1</a>

সম্পাদনা করুন: উপরের ট্যাগ সম্পর্কে বিভ্রান্ত যারা। মূলত এটি এমন একটি লিঙ্ক যা ক্লিকযোগ্য। তারপরে আপনার ওয়েব পৃষ্ঠায় অন্য কোথাও একটি ডিভ ট্যাগ থাকতে পারে

<div classname="section">content</div>

এক্ষেত্রে লিঙ্কটি ক্লিকযোগ্য হবে এবং # সেকশন যাই হোক না কেন যাবে, এক্ষেত্রে এটি আমাদের বিভাগ যা আমরা বিভাগ বলি।

বিটিডাব্লু, আমি এটি কাজ করতে চেষ্টা করে ঘন্টা ব্যয় করেছি। কিছু অস্পষ্ট মন্তব্য বিভাগে সমাধানটি খুঁজে পেয়েছি। এটি বগি ছিল এবং কিছু ট্যাগে কাজ করবে না। শরীরে কাজ করেনি। এটি সিএসএস ফাইলে html {in এ রেখে দেওয়ার পরে এটি কাজ করে।

— ক্রিশ্চিয়ান রেস
সূত্র
4
আমি খুব সুবিধাজনক হতে পারে কিন্তু তারা অপূর্ণতা হয়
— Buzut
3
সুন্দর, তবে সাবধান থাকুন কারণ এই মুহুর্তে এটি সাফারি দ্বারা সমর্থিত নয় এবং স্পষ্টতই এক্সপ্লোরার (03/2019)
— মার্কো রোমানো
2
দুর্দান্ত সমাধান, কেবল কভারেজটি 74,8% সীমাবদ্ধ। ভবিষ্যতে হতে পারে
— iepur1lla
1
যে আশ্চর্যজনক. অনেক ধন্যবাদ.
— মিক্কেল ফেনফেস
1
এটি পরের বছরগুলিতে সবচেয়ে প্রাসঙ্গিক উত্তর হবে।
— নুরুল হুদা
22 
$('a[href*=#]').click(function(event){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    event.preventDefault();
});

এটা আমার জন্য নিখুঁত কাজ করেছে

— ফিলিপ স্যান্ডার
সূত্র
1
"event.preventDefault ();" "মিথ্যা ফেরত" প্রতিস্থাপন করতে পারেন;
— আন্দ্রেস
বলার জন্য দুঃখিত, তবে কাজ করছে না এবং কোনও মসৃণতা ছাড়াই দ্রুত নামক অ্যাঙ্কর পৃষ্ঠায় প্রদর্শিত হচ্ছে না।
— কমলেশ
18

আমি অবাক হয়েছি যে কেউ কোনও দেশীয় সমাধান পোস্ট করেন নি যা ব্রাউজারের অবস্থানের হ্যাশ মেলাতে আপডেট করার ক্ষেত্রেও যত্ন নেয়। এটা এখানে:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

টিউটোরিয়াল দেখুন: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml

স্টিকি হেডারযুক্ত সাইটগুলির জন্য, scroll-padding-topসিএসএস অফসেট সরবরাহ করতে ব্যবহার করা যেতে পারে।

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

কেবল সিএসএস

html {
    scroll-behavior: smooth !important;
}

আপনাকে কেবল এটি যুক্ত করতে হবে। এখন আপনার অভ্যন্তরীণ লিঙ্কগুলি স্ক্রোলিং আচরণটি স্ট্রিম-প্রবাহের মতো মসৃণ হবে।

নোট : সমস্ত সর্বশেষ ব্রাউজার ( Opera, Chrome, Firefoxইত্যাদি) এই বৈশিষ্ট্যটি সমর্থন করে।

বিস্তারিত বোঝার জন্য, এই নিবন্ধটি পড়ুন

— ওয়াসিফ
সূত্র
1
চমৎকার! কেন এটি গৃহীত উত্তর নয়? আমাদের সেই সব জাভাস্ক্রিপ্টের দরকার নেই!
— ট্রেভর ডি কোয়েকোয়েক
1
এটি দুর্দান্ত কাজ করে, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।
— সমাধি
ব্রাউজার সমর্থন এখানে
— রায়ান ঝো
1
এটি একটি কবজ মত কাজ করে।
— জেএসের
মসৃণ স্ক্রোলিং এভারের জন্য এটি সেরা সমাধান! ধন্যবাদ!
— ইয়াহ্নি
10

আমি আপনাকে এই জেনেরিক কোডটি তৈরি করার পরামর্শ দিচ্ছি: 

$('a[href^="#"]').click(function(){

var the_id = $(this).attr("href");

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

return false;});

আপনি এখানে একটি খুব ভাল নিবন্ধ দেখতে পারেন: jquery-effet-smooth-scrol-defilement-ফ্লাইড

— সারাহ ক্রেতা
সূত্র
9
এটি জেনেরিক নয়, এটি jQuery।
— অ্যানারডেমন
6 
$(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
        }, 1000);
        return false;
      }
    }
  });
});

অফিসিয়াল: http://css-tricks.com/snippets/jquery/smooth-scrolling/

— KingRider
সূত্র
1
এটি কেবল অভ্যন্তরীণ পৃষ্ঠার অ্যাঙ্কর লিঙ্কগুলির জন্যই কাজ করে বলে মনে হয়, তবে অন্যান্য পৃষ্ঠাগুলির অ্যাঙ্কর লিঙ্কগুলি কাজ করে না, উদাহরণস্বরূপ ওয়েবসাইট.
— com
5

এখানে ইতিমধ্যে অনেক ভাল উত্তর রয়েছে - তবে খালি নোঙ্গরগুলি বাদ দিতে হবে এ বিষয়টি তারা সবাই মিস করছে । অন্যথায় এই স্ক্রিপ্টগুলি খালি অ্যাঙ্করটি ক্লিক করার সাথে সাথে জাভাস্ক্রিপ্ট ত্রুটি তৈরি করে।

আমার মতে সঠিক উত্তরটি এরকম:

$('a[href*=\\#]:not([href$=\\#])').click(function() {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});
— Blackbam
সূত্র
4

JQuery ব্যবহার:

$('a[href*=#]').click(function(){
  $('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top
  }, 500);
  return false;
});
— brequinn
সূত্র
4

হ্যাশ আইডি স্ক্রোলগুলিতে মসৃণ স্ক্রোলিংয়ের জন্য স্থানীয় সমর্থন রয়েছে।

html {
  scroll-behavior: smooth;
}

আপনি একবার দেখতে পারেন: https://www.w3schools.com/howto/howto_css_smooth_scrol.asp#section2

— লালনুন্তলুঙ্গা ছাকছুক
সূত্র
1
আপনি আমার জীবন সাথিকে বাঁচিয়েছেন
— বিশ্ব মেলেক
3

দেওয়া উত্তরটি কাজ করে তবে বহির্গামী লিঙ্কগুলিকে অক্ষম করে। অতিরিক্ত সংযুক্ত বোনাস সহ একটি সংস্করণ নীচে (সুইং) এবং বহির্গামী লিঙ্ক সম্মান করে।

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

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
— গাদা
সূত্র
জন্য +1 stop()তবে URL টুকরা কাজ করে না আশানুরূপ: ব্যাক বোতাম ফিরিয়ে আনতে নয়, এই হল কারণ যখন টুকরা অ্যানিমেশন সম্পূর্ণ হওয়ার পর URL- এ সেট করা হয়। ইউআরএলটিতে টুকরো টুকরো না থাকলে এটি আরও ভাল, উদাহরণস্বরূপ এয়ারবএনবি কীভাবে তা করে।
— এরিক
3

এইচটিএমএল

<a href="#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

বা পরম পূর্ণ URL সহ

<a href="https://somewebsite.com/#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

jQuery এর

$j(function() {
    $j('a.smooth-scroll').click(function() {
        if (
                window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&  window.location.hostname == this.hostname
        ) {
            var target = $j(this.hash);
            target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $j('html,body').animate({
                    scrollTop: target.offset().top - 70
                }, 1000);
                return false;
            }
        }
    });
});
— জস্মিত সিং
সূত্র
3

আধুনিক ব্রাউজারগুলি এই দিনগুলিতে কিছুটা দ্রুত। একটি সেটআইন্টারওয়াল কাজ করতে পারে। এই ফাংশনটি আজকাল ক্রোম এবং ফায়ারফক্সে ভাল কাজ করে (

function smoothScroll(event) {
    if (event.target.hash !== '') { //Check if tag is an anchor
        event.preventDefault()
        const hash = event.target.hash.replace("#", "")
        const link = document.getElementsByName(hash) 
        //Find the where you want to scroll
        const position = link[0].getBoundingClientRect().y 
        let top = 0

        let smooth = setInterval(() => {
            let leftover = position - top
            if (top === position) {
                clearInterval(smooth)
            }

            else if(position > top && leftover < 10) {
                top += leftover
                window.scrollTo(0, top)
            }

            else if(position > (top - 10)) {
                top += 10
                window.scrollTo(0, top)
            }

        }, 6)//6 milliseconds is the faster chrome runs setInterval
    }
}
— littleboots
সূত্র
3

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

    scroll-behavior: smooth;

এবং এটি হয়। কোনও জেএসের দরকার নেই।

a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>
স্নিপেট প্রসারিত করুন

পিএস: দয়া করে ব্রাউজারের সামঞ্জস্যতা পরীক্ষা করুন।

— সন্তোষ
সূত্র
কোন ধারকটিতে আমি স্ক্রোল-আচরণ ব্যবহার করব: মসৃণ;
— CraZyDroiD
সন্দেহের ক্ষেত্রে, এটি বডি ট্যাগটিতে যোগ করুন @ ক্র্যাজিড্রয়েড
— সন্তোষ
2

এটি যুক্ত করা হচ্ছে:

function () {
    window.location.hash = href;
}

কোনওভাবে উল্লম্ব অফসেটটি বাতিল করে দিচ্ছে

top - 72

ফায়ারফক্স এবং IE এ, ক্রোমে নয়। মূলত, পৃষ্ঠাটি অফসেটের উপর ভিত্তি করে এটি থামাতে হবে এমন পয়েন্টে মসৃণভাবে স্ক্রোল করে, তবে তারপরে পাতাটি অফসেট ছাড়াই যেখানে চলে যায় সেখানে চলে যায়।

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

আমি ব্যবহার করছি সম্পূর্ণ js এখানে:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});
— রিড
সূত্র
2

এই পৃষ্ঠাগুলি বিভিন্ন পৃষ্ঠাগুলির অ্যাঙ্কর লিঙ্কগুলি না ভেঙে নিম্নলিখিত URL গুলির জন্যও কাজ করবে।

http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor

./index.html
./index.html#anchor

প্রভৃতি

var $root = $('html, body');
$('a').on('click', function(event){
    var hash = this.hash;
    // Is the anchor on the same page?
    if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
        $root.animate({
            scrollTop: $(hash).offset().top
        }, 'normal', function() {
            location.hash = hash;
        });
        return false;
    }
});

আমি এখনও সমস্ত ব্রাউজারে এটি পরীক্ষা করিনি।

— মিডাসের
সূত্র
2

এটি jQuery কে আপনার টার্গেট হ্যাশটি সনাক্ত করতে এবং কখন এবং কোথায় থামবে তা জানার জন্য সহজ করে তুলবে।

$('a[href*="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});
— PanicBus
সূত্র
2 
$("a").on("click", function(event){
    //check the value of this.hash
    if(this.hash !== ""){
        event.preventDefault();

        $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);

        //add hash to the current scroll position
        window.location.hash = this.hash;

    }



});
— Abk
সূত্র
2

পরীক্ষিত এবং যাচাইকৃত কোড 

<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  jQuery('html, body').animate({
    scrollTop: jQuery(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if
});
});
</script>
— আতিফ তারিক
সূত্র
1

আমি এটি "/ এক্সএক্সএক্সএক্সএক্সএক্সএক্সএক্সডিএফ" এবং "# এসডিএফ" href অ্যাঙ্কর উভয়ের জন্যই করেছি

$("a[href*=#]").on('click', function(event){
    var href = $(this).attr("href");
    if ( /(#.*)/.test(href) ){
      var hash = href.match(/(#.*)/)[0];
      var path = href.match(/([^#]*)/)[0];

      if (window.location.pathname == path || path.length == 0){
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
        window.location.hash = hash;
      }
    }
});
— AndreDurao
সূত্র
1

মসৃণ স্ক্রোলের জন্য একাধিক লিঙ্ক এবং অ্যাঙ্করগুলির জন্য আমি এখানে সমাধানটি প্রয়োগ করেছি:

যদি আপনার নেভিগেশন লিঙ্কগুলি একটি নেভিগেশন ডিভিতে সেট আপ করা হয় এবং এই কাঠামোর সাহায্যে ঘোষণা করা হয়: http://www.adriantomic.se/de વિકાસment/jquery-localscrol-tutorial/

<a href = "#destinationA">

এবং আপনার সম্পর্কিত অ্যাঙ্কর ট্যাগ গন্তব্যগুলি:

<a id = "destinationA">

তারপরে এটি কেবল নথির শিরোনামে লোড করুন:

    <!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

<script type = "text/javascript">
 $(document).ready(function()
    {
        // Scroll the whole document
        $('#menuBox').localScroll({
           target:'#content'
        });
    });
</script>

@ অ্যাড্রিয়েন্টমিককে ধন্যবাদ

— collyg
সূত্র
1

আপনার যদি পৃষ্ঠায় একটি সাধারণ বোতাম থাকে তবে একটি ডিভিতে স্ক্রোল করতে এবং পিছনে বোতামটি শীর্ষে ঝাঁপিয়ে পড়ে কাজ করতে চান, কেবল এই কোডটি যুক্ত করুন:

$(window).on('hashchange', function(event) {
    if (event.target.location.hash=="") {
        window.scrollTo(0,0);
    }
});

এটি হ্যাশ মানটি পড়ার মাধ্যমে এবং জোসেফ সিলবার্সের উত্তর মতো স্ক্রোল করে বিভিন্ন ডিভগুলিতেও যেতে পারে।

— Niclas
সূত্র
1

কখনও ভুলে যাবেন না যে অফসেট () ফাংশনটি আপনার উপাদানটির দস্তাবেজকে দিচ্ছে। সুতরাং আপনার যখন আপনার উপাদানটির পিতামাতার সাথে তুলনামূলকভাবে স্ক্রোল প্রয়োজন তখন আপনার এটি ব্যবহার করা উচিত;

    $('.a-parent-div').find('a').click(function(event){
        event.preventDefault();
        $('.scroll-div').animate({
     scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
     }, 500);       
  });

মূল পয়েন্টটি স্ক্রোল-ডিভের স্ক্রোলটপ পাচ্ছে এবং এটিকে স্ক্রোলটোপে যুক্ত করুন। আপনি যদি এই অবস্থানটি না করেন () ফাংশন সর্বদা আপনাকে আলাদা অবস্থানের মান দেয়।

— rotring05
সূত্র
1

আপনি অ্যাঙ্কর ট্যাগের অফসেট শীর্ষটি window.scroll()সহ ব্যবহার করতে behavior: smoothএবং topসেট করতে পারেন যা নিশ্চিত করে যে অ্যাঙ্কর ট্যাগটি ভিউপোর্টের শীর্ষে থাকবে।

document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', function (e) {
        e.preventDefault();
        var href = this.getAttribute("href");
        var elem = document.querySelector(href)||document.querySelector("a[name="+href.substring(1, href.length)+"]");
        //gets Element with an id of the link's href 
        //or an anchor tag with a name attribute of the href of the link without the #
        window.scroll({
            top: elem.offsetTop, 
            left: 0, 
            behavior: 'smooth' 
        });
        //if you want to add the hash to window.location.hash
        //you will need to use setTimeout to prevent losing the smooth scrolling behavior
       //the following code will work for that purpose
       /*setTimeout(function(){
            window.location.hash = this.hash;
        }, 2000); */
    });
});

ডেমো:

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

আপনি শুধু সিএসএস সম্পত্তি সেট করতে পারেন scroll-behaviorথেকে smooth(যা এটি অত্যাধুনিক ব্রাউজারে সমর্থন) যা JavaScript প্রয়োজনীয়তার obviates।

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

— hev1
সূত্র
0

ভাগ করে নেওয়ার জন্য ধন্যবাদ, জোসেফ সিলবার মানক আচরণ (শীর্ষে স্ক্রোল) রাখতে সামান্য পরিবর্তন সহ আপনার 2018 এর সমাধানটি এখানে ES6 হিসাবে রয়েছে:

document.querySelectorAll("a[href^=\"#\"]").forEach((anchor) => {
  anchor.addEventListener("click", function (ev) {
    ev.preventDefault();

    const targetElement = document.querySelector(this.getAttribute("href"));
    targetElement.scrollIntoView({
      block: "start",
      alignToTop: true,
      behavior: "smooth"
    });
  });
});
— Motine
সূত্র
0

ব্রাউজারের ইউআরএলটিতে হ্যাশ যুক্ত করার সময় আইডির পরিবর্তে নির্দিষ্ট নামের সাথে অ্যাঙ্কর ট্যাগে জ্যাকুয়ারি এবং অ্যানিম্যাটগুলি প্রয়োজন। এছাড়াও jquery সহ বেশিরভাগ উত্তরে একটি ত্রুটি সমাধান করে যেখানে # সাইনটি একটি পালিয়ে যাওয়া ব্যাকস্ল্যাশ সহ উপসর্গ করা হয় না। দুর্ভাগ্যক্রমে, পিছনের বোতামটি আগের হ্যাশ লিঙ্কগুলিতে সঠিকভাবে নেভিগেট করে না ...

$('a[href*=\\#]').click(function (event)
{
    let hashValue = $(this).attr('href');
    let name = hashValue.substring(1);
    let target = $('[name="' + name + '"]');
    $('html, body').animate({ scrollTop: target.offset().top }, 500);
    event.preventDefault();
    history.pushState(null, null, hashValue);
});
— jjxtra
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.