পৃষ্ঠা স্ক্রোলিং ছাড়াই অবস্থান পরিবর্তন করা হচ্ছে

Question

কনটেন্টে লোড করতে আমাদের অজ্যাক্স ব্যবহার করে কয়েকটি পৃষ্ঠা পেয়েছে এবং এমন কয়েকটি অনুষ্ঠান রয়েছে যেখানে আমাদের একটি পৃষ্ঠায় গভীর লিঙ্ক করতে হবে। "ব্যবহারকারীদের" সাথে একটি লিঙ্ক থাকার পরিবর্তে এবং "সেটিংস" ক্লিক করার জন্য লোকদের বলার পরিবর্তে লোককে ব্যবহারের সাথে লিঙ্ক করতে সক্ষম হতে সহায়তা করে asএসপিএক্স # সেটিংস

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

এই নিষ্ক্রিয় করার কোন উপায় আছে কি? নীচে আমি এখন পর্যন্ত এটি কীভাবে করছি।

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash=$(this).attr("id")
            //return false;
    });
});

আমি আশা করেছিলাম যে return false;পৃষ্ঠাটি স্ক্রোলিং থেকে থামবে - তবে এটি লিঙ্কটি মোটেও কাজ করে না। সুতরাং এখনই এটি মন্তব্য করা হয়েছে যাতে আমি নেভিগেট করতে পারি।

কোন ধারনা?

Answer 1

পদক্ষেপ 1: হ্যাশ সেট না হওয়া অবধি আপনাকে নোড আইডিটি অপসারণ করতে হবে। হ্যাশ সেট হওয়ার সময় নোড থেকে আইডিটি সরিয়ে, এবং তারপরে আবার যুক্ত করে এটি করা হয়।

hash = hash.replace( /^#/, '' );
var node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
}
document.location.hash = hash;
if ( node.length ) {
  node.attr( 'id', hash );
}

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

hash = hash.replace( /^#/, '' );
var fx, node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
  fx = $( '<div></div>' )
          .css({
              position:'absolute',
              visibility:'hidden',
              top: $(document).scrollTop() + 'px'
          })
          .attr( 'id', hash )
          .appendTo( document.body );
}
document.location.hash = hash;
if ( node.length ) {
  fx.remove();
  node.attr( 'id', hash );
}

পদক্ষেপ 3: এটিকে একটি প্লাগইনে মুড়িয়ে রাখুন এবং এতে লেখার পরিবর্তে এটি ব্যবহার করুন location.hash...

Comments

না, দ্বিতীয় ধাপে যা ঘটছে তা হ'ল একটি লুকানো ডিভি তৈরি করা হয়েছে এবং স্ক্রোলটির বর্তমান অবস্থানে রাখা হয়েছে। এটি অবস্থানের মতো চাক্ষুষভাবে একই: স্থির / শীর্ষ: 0। সুতরাং বর্তমানে স্ক্রোলবারটি ঠিক একই জায়গায় চলেছে "সরানো"।

— বোরগার

এই সমাধান প্রকৃতপক্ষে ভাল কাজ করে - তবে লাইন: উপরে: $ .scroll () শীর্ষ + 'পিক্সেল' হওয়া উচিত: উপরে: $ (উইন্ডো) .scrollTop () + px আকারে '।

— মার্ক পার্কিনস

কোন ব্রাউজারের এখানে পদক্ষেপ 2 প্রয়োজন তা জেনে রাখা কার্যকর হবে।

— ডিজেসি

ধন্যবাদ বোরগার এটি আমার কাছে ধাঁধা দেয় যদিও আপনি লক্ষ্য নোডের আইডি মোছার আগে এফএক্স ডিভি সংযোজন করছেন। এর অর্থ এমন একটি তাত্ক্ষণিকতা রয়েছে যাতে নথিতে নকল আইডি রয়েছে। কোনও সম্ভাব্য সমস্যা, বা কমপক্ষে খারাপ আচরণের মতো মনে হচ্ছে;)

— বেন

আপনাকে অনেক ধন্যবাদ, এটি আমাকেও সাহায্য করেছিল। তবে এটি কার্যকর হওয়ার সময় আমি একটি পার্শ্ব প্রতিক্রিয়াও লক্ষ্য করেছি: আমি প্রায়শই "মাঝারি মাউস বোতামটি" লক করে মাউসটিকে কেবল যেদিকে স্ক্রোল করতে চাই সেদিকে নিয়ে যাই। গুগল ক্রোমে এটি স্ক্রোল প্রবাহকে বাধা দেয়। এটির জন্য কি অভিনব কাজ থাকতে পারে?

— ওয়াইএমএমডি

Answer 2

হ্যাশ পরিবর্তন করতে history.replaceStateবা history.pushState* ব্যবহার করুন । এটি সম্পর্কিত উপাদানটিতে লাফ দেবে না।

উদাহরণ

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

জেএসফিডেলে ডেমো

_{^{* আপনি যদি ইতিহাসকে এগিয়ে এবং পশ্চাদপটে সমর্থন চান}}

ইতিহাসের আচরণ

আপনি ব্যবহার করে থাকেন history.pushStateএবং আপনি যদি ব্যবহারকারীর ব্রাউজার (ফরওয়ার্ড / পিছিয়ে) ইতিহাস বোতাম ব্যবহার যখন পরীক্ষামূলক খুঁজে বার করো পৃষ্ঠা স্ক্রলিং চাই না scrollRestorationসেটিং (যেমন, Chrome 46+ শুধুমাত্র) ।

history.scrollRestoration = 'manual';

• ফটকা খেলা
• তথ্য

ব্রাউজার সমর্থন

• replaceState
• pushState
• polyfill

Comments

replaceStateসম্ভবত এখানে যেতে ভাল উপায়। পার্থক্য pushStateআপনার ইতিহাসে একটি আইটেম যুক্ত করে যখন replaceStateনা হয়।

— আকিল ফার্নান্দেস

ধন্যবাদ @ আকিল ফার্নান্দেস আপনি ঠিক বলেছেন। আমি সবেমাত্র উত্তরটি আপডেট করেছি।

— HaNdTriX

এটি সবসময় bodyস্ক্রল হয় না, কখনও কখনও এটি documentElement। এই দেখুন সারকথা ডিয়েগো Perini দ্বারা

— Matijs

ie8 / 9 এখানে কোন ধারণা?

— ব্যবহারকারী 151496

: @ খুঁজে বার করো user151496 stackoverflow.com/revisions/...

— HaNdTriX

Answer 3

আমি মনে করি আমি সম্ভবত একটি সহজ সমাধান খুঁজে পেয়েছি found সমস্যাটি হ'ল ইউআরএল-এর হ্যাশও সেই পৃষ্ঠায় একটি উপাদান যা আপনি স্ক্রোল করে যাচ্ছেন। আমি যদি কেবল হ্যাশটিতে কিছু পাঠ্য প্রিপেন্ড করি তবে এখন এটি কোনও বিদ্যমান উপাদানটির উল্লেখ করে না!

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash="btn_"+$(this).attr("id")
            //return false;
    });
});

এখন URL টি প্রদর্শিত হবে page.aspx#btn_elementIDযা পৃষ্ঠায় কোনও সত্যিকারের আইডি নয়। আমি কেবল "বিটিএন_" সরিয়েছি এবং আসল উপাদান আইডি পেয়েছি

Comments

দুর্দান্ত সমাধান। প্রচুর ব্যথাহীন।

— সোয়াডার

মনে রাখবেন যে আপনি যদি ইতিমধ্যে পেজ.এএসপিএক্স # এলিমেন্টের ইউআরএলগুলি কোনও কারণে প্রতিশ্রুতিবদ্ধ থাকেন তবে আপনি এই কৌশলটি বিপরীত করতে পারেন এবং আপনার সমস্ত আইডিতে "বিটিএন_" প্রিপেন্ড করতে পারেন

— জোশুয়াহেদলুন্ড

আপনি যদি ব্যবহার করেন তবে কাজ করে না: সিএসএসে সিউডো-সিলেক্টরগুলিকে লক্ষ্য করুন।

— জেসন টি ফেদারিংহাম

এই সমাধান ভালোবাসুন! আমরা এজ্যাক্স ভিত্তিক নেভিগেশনের জন্য ইউআরএল হ্যাশ ব্যবহার করছি, আইডিগুলি /যুক্তিসঙ্গত বলে মনে করে প্রিফেন্ডিং করছি ।

— কনেল

Answer 4

আপনার মূল কোডটির একটি স্নিপেট:

$("#buttons li a").click(function(){
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});

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

$("#buttons li a").click(function(e){
    // need to pass in "e", which is the actual click event
    e.preventDefault();
    // the preventDefault() function ... prevents the default action.
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});

Comments

এটি কাজ করবে না কারণ hashসম্পত্তি নির্ধারণের ফলে পৃষ্ঠাটি যেভাবেই হোক স্ক্রোল হয়ে যাবে।

— jordanbtucker

Answer 5

আমি সম্প্রতি একটি ক্যারোসেল তৈরি করছিলাম যা window.location.hashরাষ্ট্র বজায় রাখার উপর নির্ভর করে এবং আবিষ্কারটি আবিষ্কার করে যে ক্রোম এবং ওয়েবকিট ব্রাউজারগুলি window.onhashchangeইভেন্টটি চালিত হওয়ার সময় একটি বিশ্রী ঝাঁকুনির সাহায্যে স্ক্রোলিং (এমনকি কোনও দৃশ্যমান লক্ষ্য পর্যন্তও) বাধ্য করবে ।

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

$(window).on("hashchange", function(e) { 
  e.stopPropogation(); 
  e.preventDefault(); 
});

ডিফল্ট ব্রাউজার আচরণ বন্ধ করতে কিছুই করেনি। আমি যে সমাধানটি পেয়েছি তা window.history.pushStateহ্যাশ পরিবর্তন করার জন্য অনাকাঙ্ক্ষিত পার্শ্ব-প্রতিক্রিয়াগুলি ট্রিগার না করেই ব্যবহৃত হয়েছিল ।

 $("#buttons li a").click(function(){
    var $self, id, oldUrl;

    $self = $(this);
    id = $self.attr('id');

    $self.siblings().removeClass('selected'); // Don't re-query the DOM!
    $self.addClass('selected');

    if (window.history.pushState) {
      oldUrl = window.location.toString(); 
      // Update the address bar 
      window.history.pushState({}, '', '#' + id);
      // Trigger a custom event which mimics hashchange
      $(window).trigger('my.hashchange', [window.location.toString(), oldUrl]);
    } else {
      // Fallback for the poors browsers which do not have pushState
      window.location.hash = id;
    }

    // prevents the default action of clicking on a link.
    return false;
});

তারপরে আপনি সাধারণ হ্যাশচেঞ্জ ইভেন্ট এবং উভয়ের জন্য শুনতে পারেন my.hashchange:

$(window).on('hashchange my.hashchange', function(e, newUrl, oldUrl){
  // @todo - do something awesome!
});

Comments

অবশ্যই my.hashchangeইভেন্টের নাম

— সর্বাধিক

Answer 6

ঠিক আছে, এটি একটি পুরানো বিষয় তবে আমি ভেবেছিলাম যে 'সঠিক' উত্তরটি সিএসএসের সাথে ভালভাবে কাজ করে না বলে আমি চিপ করব।

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

var hashThis = function( $elem, callback ){
    var scrollLocation;
    $( $elem ).on( "click", function( event ){
        event.preventDefault();
        scrollLocation = $( window ).scrollTop();
        window.location.hash = $( event.target ).attr('href').substr(1);
    });
    $( window ).on( "hashchange", function( event ){
        $( window ).scrollTop( scrollLocation );
        if( typeof callback === "function" ){
            callback();
        }
    });
}
hashThis( $( ".myAnchor" ), function(){
    // do something useful!
});

Comments

আপনার হ্যাশচেঞ্জের দরকার নেই, কেবল তাত্ক্ষণিকভাবে ফিরে স্ক্রোল করুন

— daniel.gindi

Answer 7

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

মূল উদাহরণের জন্য:

$("#buttons li a").click(function(){
        $("#buttons li a").removeClass('selected');
        $(this).addClass('selected');

        var scrollPos = $(document).scrollTop();
        document.location.hash=$(this).attr("id")
        $(document).scrollTop(scrollPos);
});

Comments

মোবাইল ব্রাউজারগুলির সাথে এই পদ্ধতির সমস্যাটি আপনি লক্ষ্য করতে পারেন যে স্ক্রোলিংটি সংশোধিত হয়েছে

— তোফান্ডেল

Answer 8

আমি মনে করি না এটি সম্ভব। যতদূর আমি জানি, কেবলমাত্র যখন কোনও ব্রাউজার পরিবর্তিত হয়ে স্ক্রোল না করে তা document.location.hashহ্যাশ পৃষ্ঠার মধ্যে উপস্থিত না থাকলে।

এই নিবন্ধটি সরাসরি আপনার প্রশ্নের সাথে সম্পর্কিত নয়, তবে এটি পরিবর্তনের সাধারণ ব্রাউজার আচরণ নিয়ে আলোচনা করেdocument.location.hash

Answer 9

যদি আপনি হ্যাশ পার্সার সহ হ্যাশচেঞ্জের ইভেন্টটি ব্যবহার করেন তবে আপনি লিঙ্কগুলিতে ডিফল্ট ক্রিয়া রোধ করতে পারেন এবং অবস্থান পরিবর্তন করতে পারেন an একটি আইটেমের আইডির সাথে পার্থক্য রাখতে একটি অক্ষর যুক্ত করা উচিত

$('a[href^=#]').on('click', function(e){
    e.preventDefault();
    location.hash = $(this).attr('href')+'/';
});

$(window).on('hashchange', function(){
    var a = /^#?chapter(\d+)-section(\d+)\/?$/i.exec(location.hash);
});

Comments

পারফেক্ট! পাঁচ ঘন্টা পরে হ্যাশ পুনরায় লোড দিয়ে সমস্যাটি সমাধান করার চেষ্টা করার পরে ...: / এটি কেবল কাজ করেছিল যা !! ধন্যবাদ !!!

— ইগোর ত্রিনাদে

Answer 10

এটিকে এখানে যুক্ত করা হচ্ছে কারণ আরও প্রাসঙ্গিক প্রশ্নগুলি এখানে নির্দেশ করে থাকা সদৃশ হিসাবে চিহ্নিত করা হয়েছে ...

আমার পরিস্থিতি সহজ:

• ব্যবহারকারী লিঙ্কটি ক্লিক করে ( a[href='#something'])
• ক্লিক হ্যান্ডলার করেন: e.preventDefault()
• স্মুথস্ক্রোল ফাংশন: $("html,body").stop(true,true).animate({ "scrollTop": linkoffset.top }, scrollspeed, "swing" );
• তারপর window.location = link;

এইভাবে, স্ক্রোলটি ঘটে এবং যখন অবস্থান আপডেট হয় তখন কোনও লাফ নেই।

Answer 11

এটি করার অন্য উপায়টি ভিউপোর্টের শীর্ষে লুকানো একটি ডিভি যুক্ত করা। এই ডিভটি হ্যাশটির ইউআরএল যুক্ত হওয়ার আগে হ্যাশটির আইডি নির্ধারিত হয় .... সুতরাং আপনি কোনও স্ক্রোল পাবেন না।

Answer 12

ইতিহাস-সক্ষম সক্ষম ট্যাবগুলির জন্য আমার সমাধানটি এখানে রয়েছে:

    var tabContainer = $(".tabs"),
        tabsContent = tabContainer.find(".tabsection").hide(),
        tabNav = $(".tab-nav"), tabs = tabNav.find("a").on("click", function (e) {
                e.preventDefault();
                var href = this.href.split("#")[1]; //mydiv
                var target = "#" + href; //#myDiv
                tabs.each(function() {
                    $(this)[0].className = ""; //reset class names
                });
                tabsContent.hide();
                $(this).addClass("active");
                var $target = $(target).show();
                if ($target.length === 0) {
                    console.log("Could not find associated tab content for " + target);
                } 
                $target.removeAttr("id");
                // TODO: You could add smooth scroll to element
                document.location.hash = target;
                $target.attr("id", href);
                return false;
            });

এবং সর্বশেষ নির্বাচিত ট্যাবটি দেখানোর জন্য:

var currentHashURL = document.location.hash;
        if (currentHashURL != "") { //a tab was set in hash earlier
            // show selected
            $(currentHashURL).show();
        }
        else { //default to show first tab
            tabsContent.first().show();
        }
        // Now set the tab to active
        tabs.filter("[href*='" + currentHashURL + "']").addClass("active");

উল্লেখ্য *=উপর filterকল। এটি একটি jQuery- নির্দিষ্ট জিনিস এবং এটি ছাড়া আপনার ইতিহাস-সক্ষম ট্যাবগুলি ব্যর্থ হবে।

Answer 13

এই সমাধানটি আসল স্ক্রোলটপ এ একটি ডিভি তৈরি করে এবং হ্যাশ পরিবর্তন করার পরে এটি সরিয়ে দেয়:

$('#menu a').on('click',function(){
    //your anchor event here
    var href = $(this).attr('href');
    window.location.hash = href;
    if(window.location.hash == href)return false;           
    var $jumpTo = $('body').find(href);
    $('body').append(
        $('<div>')
            .attr('id',$jumpTo.attr('id'))
            .addClass('fakeDivForHash')
            .data('realElementForHash',$jumpTo.removeAttr('id'))
            .css({'position':'absolute','top':$(window).scrollTop()})
    );
    window.location.hash = href;    
});
$(window).on('hashchange', function(){
    var $fakeDiv = $('.fakeDivForHash');
    if(!$fakeDiv.length)return true;
    $fakeDiv.data('realElementForHash').attr('id',$fakeDiv.attr('id'));
    $fakeDiv.remove();
});

alচ্ছিক, পৃষ্ঠা লোড এ অ্যাঙ্কর ইভেন্ট ট্রিগার:

$('#menu a[href='+window.location.hash+']').click();

Answer 14

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

1. সরাসরি দেহ ট্যাগের নীচে, আপনার এটির সংস্করণ রাখুন:

 <a name="home"> </a> <a name="firstsection"> </a> <a name="secondsection"> </a> <a name="thirdsection"> </a>

2. আইডির পরিবর্তে ক্লাসগুলির সাথে আপনার বিভাগের নাম দিন।

3. আপনার প্রসেসিং কোডে, হ্যাশ চিহ্নটি বাদ দিন এবং একটি বিন্দুর সাথে প্রতিস্থাপন করুন:

    var trimPanel = loadhash.substring (1); // হ্যাশ হারাতে

    var dotSelect = '।' + ট্রিমপ্যানেল; // ডট দিয়ে হ্যাশ প্রতিস্থাপন করুন

    $ (DotSelect) .addClass ( "activepanel") প্রদর্শনী ()। // হ্যাশের সাথে যুক্ত ডিভ দেখান।

শেষ অবধি, এলিমেন্ট.প্রিভেন্টডিফল্ট সরান বা ফিরে আসুন: মিথ্যা এবং নাভিকে ঘটতে দিন। উইন্ডোটি শীর্ষে থাকবে, হ্যাশ ঠিকানা বারের url এ যুক্ত হবে এবং সঠিক প্যানেলটি খুলবে open

Answer 15

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

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash) {
        $("#buttons li a").removeClass('selected');
        s=$(document.location.hash).addClass('selected').attr("href").replace("javascript:","");
        eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function() {
            var scrollLocation = $(window).scrollTop();
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash = $(this).attr("id");
            $(window).scrollTop( scrollLocation );
    });
});

Answer 16

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

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

$(window).on('hashchange', function(){debugger});

আপনি লক্ষ্য করবেন যে আপনি আপনার ইউআরএল পরিবর্তন করার সাথে সাথে প্রবেশ বোতামটি চাপার সাথে সাথে পৃষ্ঠাটি তাত্ক্ষণিকভাবে সংশ্লিষ্ট বিভাগে থামবে, তার পরে আপনার নিজের সংজ্ঞায়িত স্ক্রোলিং ফাংশনটি ট্রিগার হয়ে যাবে, এবং এটি সেই বিভাগে স্ক্রলগুলি সাজায় যা দেখে মনে হচ্ছে খুব খারাপ.

আমার পরামর্শটি হ'ল:

1. আপনি যে অংশটিতে স্ক্রোল করতে চান তাতে আপনার অ্যাঙ্কার পয়েন্ট হিসাবে আইডি ব্যবহার করবেন না।

2. আপনি অবশ্যই আইডি ব্যবহার করুন, আমার মত। পরিবর্তে 'পপস্টেট' ইভেন্ট শ্রোতাদের ব্যবহার করুন, এটি ইউআরএল যুক্ত হওয়া অংশটিতে স্বয়ংক্রিয়ভাবে স্ক্রোল করবে না, পরিবর্তে, আপনি পপস্টেট ইভেন্টের মধ্যে আপনার নিজস্ব সংজ্ঞায়িত ফাংশনটি কল করতে পারবেন।

   $(window).on('popstate', function(){myscrollfunction()});

অবশেষে আপনার নিজের নির্ধারিত স্ক্রোলিং ফাংশনটিতে আপনাকে কিছু কৌশল করতে হবে:

    let hash = window.location.hash.replace(/^#/, '');
    let node = $('#' + hash);
    if (node.length) {
        node.attr('id', '');
    }
    if (node.length) {
        node.attr('id', hash);
    }

আপনার ট্যাগের আইডি মুছুন এবং এটি পুনরায় সেট করুন।

এই কৌতুক করতে হবে।

Answer 17

কেবলমাত্র নথি প্রস্তুতের জন্য jQuery এ এই কোড যুক্ত করুন

সূত্র: http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(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;
      }
    }
  });
});