জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাঙ্কর জাম্পিং

Question

আমার একটি প্রশ্ন রয়েছে যা খুব প্রায়শই পাওয়া যাবে। সমস্যাটি হ'ল কোথাও একটি সুস্পষ্ট সমাধান খুঁজে পাওয়া যায় না।

অ্যাঙ্কর সম্পর্কিত আমার দুটি সমস্যা আছে।

মূল লক্ষ্যটি হ'ল কোনও পৃষ্ঠায় লাফ দেওয়ার জন্য অ্যাঙ্করগুলি ব্যবহার করার সময় কোনও হ্যাশ ছাড়াই একটি দুর্দান্ত ক্লিন ইউআরএল পাওয়া।

সুতরাং অ্যাঙ্করগুলির কাঠামোটি হ'ল:

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

ঠিক আছে, আপনি লিঙ্কগুলির মধ্যে একটিতে ক্লিক করলে ইউআরএল স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে

www.domain.com/page#1

শেষে এটি ঠিক হওয়া উচিত:

www.domain.com/page

এ পর্যন্ত সব ঠিকই. এখন দ্বিতীয় বিষয়টি হল, আপনি যখন সেই সমস্যার জন্য ইন্টারনেট অনুসন্ধান করবেন আপনি javascriptসমাধান হিসাবে এটি পাবেন ।

আমি এই ফাংশনটি পেয়েছি:

function jumpto(anchor){
    window.location.href = "#"+anchor;
}

এবং সাথে এই ফাংশন কল:

<a onclick="jumpto('one');">One</a>

আগের মতো কি হবে এটি ইউআরএলটিতে হ্যাশ যুক্ত করবে। আমিও যোগ করেছিলাম

<a onclick="jumpto('one'); return false;">

সাফল্য ছাড়া. সুতরাং যদি এমন কেউ থাকে যে আমাকে কীভাবে এটি সমাধান করতে পারে বলতে পারে তবে আমি সত্যই প্রশংসা করব।

অনেক ধন্যবাদ.

Comments

এ সম্পর্কে নিশ্চিত নয়, তবে আপনি লাফানোর পরে হ্যাশ সম্পত্তিটিতে ম্যানুয়ালি লেখার চেষ্টা করতে পারেন। উদাহরণস্বরূপ অনক্লিক হ্যান্ডলারের একটি টাইমআউট সেট করুন যা সেট করে window.location.hash=''।

— জেফ

আপনি কি বোঝাতে চাইছেন যে একই ওয়েবপৃষ্ঠায় অন্য বিভাগে যাওয়ার সময় ইউআরএলটিতে # টি প্রদর্শিত হবে না?

— রজার এনজি

যে ক্ষেত্রে আপনি হয় উইন্ডোর scrollTop নিপূণভাবে, সাধারণত দ্বারা থাকবে window.scrollToবা অনুরূপ jQuery এর সাহায্যকারী: stackoverflow.com/questions/6677035/jquery-scroll-to-element বা stackoverflow.com/questions/500336/...

— ফ্রাঙ্ক ভ্যান পাফেলেন

@ জেফ - আপনি যদি location.hash=''করেন #তবে সেখানে অবশেষ।

— ডেরেক 朕 會 功夫

দয়া করে এটি করবেন না। আপনার বুকমার্কগুলিতে পৃষ্ঠাটি সংরক্ষণ করার সময় হ্যাশগুলি ভাল।

— মার্কো সুলা

Answer 1

আপনি লক্ষ্য উপাদানের সমন্বয় পেতে এবং এতে স্ক্রোলের অবস্থান সেট করতে পারেন। তবে এটি এত জটিল।

এটি করার একটি অলস উপায় এখানে:

function jump(h){
    var url = location.href;               //Save down the URL without hash.
    location.href = "#"+h;                 //Go to the target element.
    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
}

এটি replaceStateইউআরএল হেরফের করতে ব্যবহার করে। আপনি যদি আইই এর জন্য সমর্থনও চান , তবে আপনাকে এটি জটিল উপায়ে করতে হবে :

function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​

ডেমো: http://jsfiddle.net/DerekL/rEpPA/
অন্য এক ডাব্লু / ট্রানজিশন: http://jsfiddle.net/DerekL/x3edvp4t/

আপনি এটি ব্যবহার করতে পারেন .scrollIntoView:

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

_{(আচ্ছা আমি মিথ্যা বলেছি। এটা মোটেই জটিল নয়।)}

Comments

ইঁদুর !! লিঙ্কটি নষ্ট হয়ে গেছে :-( আমি ভেবেছিলাম জেএস ফিডলস চিরতরে সেখানে রয়েছেন

— মাওগ বলেছেন

@ মাউগ স্পষ্টতই তারা /showইউআরএল শেষে অ্যাড ব্যবহার করার ক্ষমতা সরিয়ে ফেলেছে ।

— ডেরেক 朕 會

"এমনকি আইআই 6 এটি সমর্থন করে" আমি দেখেছি এটির সেরা মন্তব্য।

— জোশ

@ ব্ল্যাক একটি "jQuery" উপাদান হিসাবে কিছুই নেই। আপনি যদি আপনার ক্যোয়ারী থেকে প্রথম উপাদানটি বের করতে চান তবে করুন $(mySelector)[0].scrollIntoView()।

— ডেরেক 朕 會 功夫

1+ এর জন্য scrollIntoView। 1- এটি শেষ উল্লেখ করার জন্য।

— Yay295

Answer 2

আমি এটি অনেক সহজ সমাধান বলে মনে করি:

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

এই পদ্ধতিটি ওয়েবসাইটটি পুনরায় লোড করে না এবং স্ক্রিন রিডারের জন্য প্রয়োজনীয় অ্যাঙ্করগুলিতে ফোকাস সেট করে ।

Comments

এবং যা IE এ খুব কমই কাজ করে, এটি সমস্ত আইই তে কাজ করে;)

— অ্যাডাম 111 পি

আমি শেষ করেছিwindow.location = window.location.origin + window.location.pathname + '#hash';

— অ্যালেক্স

এটি আমার জন্য পৃষ্ঠাটি পুনরায় লোড করেছে। গৃহীত উত্তরগুলি কাজ করে শেষ হয়েছে, যদিও আমি আশা করি এটি আরও কম ছিল।

— হোল্ডঅফহ্যাঞ্জার

Answer 3

একটি মন্তব্যের জন্য যথেষ্ট প্রতিনিধি।

নির্বাচিত উত্তরে getElementById () ভিত্তিক পদ্ধতিটি যদি অ্যাঙ্কর সেট nameনা করে থাকে তবে idসেট করে না (যা প্রস্তাবিত নয়, তবে বন্যে ঘটে)।

আপনার যদি দস্তাবেজ মার্কআপের নিয়ন্ত্রণ না রাখে (যেমন: ওয়েবেক্সটেনশন) কিছু মনে রাখবেন।

locationনির্বাচিত উত্তর ভিত্তিক পদ্ধতি সাথেও সরলীকৃত করা যেতে পারে location.replace:

function jump(hash) { location.replace("#" + hash) }

Answer 4

কারণ আপনি যখন করবেন

window.location.href = "#"+anchor;

আপনি একটি নতুন পৃষ্ঠা লোড করুন, আপনি এটি করতে পারেন:

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

Comments

আমার মনে হয় না হ্যাশ যুক্ত করা এটি একটি নতুন পৃষ্ঠা করে তোলে।

— ডেরেক 朕 會

এটি পৃষ্ঠাটি পুনরায় লোড করে না।

— ডেরেক 朕 會

আপনি ঠিক বলেছেন এটি পৃষ্ঠা পুনরায় লোড করে না। আমি ক্রোমের সাথে কনসোলে চেষ্টা করি এবং ফেভিকনটি আবার লোড হয় is

— জোনাথন ভুকোভিচ-ট্রিবিউহরেট

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

— বিউজর

Answer 5

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

আমার কাছে .html ফাইলটিতে:

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

আমার কাছে .js ফাইলে আছে

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

আমি যখন প্রম্পটে টেস্ট 100 লিখি , তখন এটি সেখানে চলে যাবে যেখানে আমি এইচটিএমএল ফাইলটিতে স্প্যান আইডি = "টেস্ট 100" রেখেছি।

আমি গুগল ক্রোম ব্যবহার করি।

দ্রষ্টব্য: এই ধারণাটি একই পৃষ্ঠায় ব্যবহার করে লিঙ্ক করে এসেছে

<a href="#test100">Test link</a>

যা ক্লিক করে অ্যাঙ্কারে প্রেরণ করবে। এটি একাধিকবার কাজ করার জন্য, অভিজ্ঞতা থেকে পৃষ্ঠাটি পুনরায় লোড করা দরকার।

স্ট্যাকওভারফ্লোতে লোকদের toণ (এবং সম্ভবত স্ট্যাকেক্সচেঞ্জ) খুব বেশি মনে হয় না যে আমি কীভাবে সমস্ত বিট এবং টুকরো সংগ্রহ করেছি। ☺