जावास्क्रिप्ट का उपयोग करके लंगर कूद

129

मेरा एक सवाल है जो बहुत बार मिल जाएगा। समस्या यह है कि कहीं भी एक स्पष्ट समाधान नहीं पाया जा सकता है।

मुझे एंकरों के संबंध में दो समस्याएं हैं।

मुख्य लक्ष्य यह होना चाहिए कि किसी पृष्ठ पर कूदने के लिए एंकर का उपयोग करते समय उसमें बिना किसी हैश के एक अच्छा स्वच्छ यूआरएल प्राप्त किया जाए।

तो एंकर की संरचना है:

<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>

ठीक है, यदि आप लिंक में से एक पर क्लिक करेंगे, तो url अपने आप बदल जाएगा

www.domain.com/page#1

अंत में यह सिर्फ होना चाहिए:

www.domain.com/page

अब तक सब ठीक है। अब दूसरी बात यह है कि जब आप उस समस्या के लिए इंटरनेट पर खोज करेंगे तो आपको javascriptसमाधान के रूप में मिलेगा ।

मुझे यह फंक्शन मिला है:

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

और उस फ़ंक्शन को कॉल करना:

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

पहले जैसा ही रहेगा। यह url में हैश जोड़ देगा। मैंने भी जोड़ा

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

सफलता के बिना। इसलिए अगर कोई है जो मुझे बता सकता है कि इसे कैसे हल किया जाए तो मैं वास्तव में सराहना करूंगा।

बहुत बहुत धन्यवाद।

— स्वास्थ
स्रोत

इस बारे में निश्चित नहीं है, लेकिन आप जंप के बाद हाथ से संपत्ति को लिखने का प्रयास कर सकते हैं। उदाहरण के लिए ऑन्कलिक हैंडलर में एक टाइमआउट सेट करें जो सेट करता है window.location.hash=''।

— जेफ

क्या आपका मतलब है कि आप उसी वेबपेज में किसी अन्य सेक्शन पर जाते समय URL में # दिखाया गया होना नहीं चाहते हैं?

— रोजर एनजी

2

उस स्थिति में आपको या तो खिड़की के स्क्रॉलटॉप में हेरफेर करना होगा, आमतौर पर window.scrollToया इसी jQuery के सहायक द्वारा : stackoverflow.com/questions/6677035/jquery-scroll-to-element या stackoverflow

— फ्रैंक वैन पफलेन

@ जेफ - यदि आप करते हैं location.hash='', तो #वहां रहता है।

— डेरेक 會功夫 ere

कृपया ऐसा न करें। आपके बुकमार्क में पृष्ठ को सहेजने के दौरान हैश अच्छा है।

— मार्को सुल

204

आप लक्ष्य तत्व का समन्वय प्राप्त कर सकते हैं और उस पर स्क्रॉल स्थिति सेट कर सकते हैं। लेकिन यह इतना जटिल है।

यहाँ यह करने के लिए एक आलसी तरीका है:

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.
}

यह replaceStateurl में हेरफेर करने के लिए उपयोग करता है। यदि आप भी IE के लिए समर्थन चाहते हैं , तो आपको इसे जटिल तरीके से करना होगा :

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/
एक और w / संक्रमण: http://jsfiddle.net/DerekL/x3edvp4t/

आप यह भी उपयोग कर सकते हैं .scrollIntoView:

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

_{(वैसे मैं झूठ बोलता हूं। यह बिल्कुल भी जटिल नहीं है।)}

— डेरेक 朕朕朕
स्रोत

1

चूहे !! लिंक टूट गया है :-( मैंने सोचा था कि जेएस

— फ़िडल्स

1

@ मेवग जाहिरा तौर पर उन्होंने /showurl के अंत में ऐड का उपयोग करने की क्षमता को हटा दिया है ।

— डेरेक 會會 ere

11

"यहां तक कि IE6 इसका समर्थन करता है" सबसे अच्छी टिप्पणी है जिसे मैंने कभी देखा है।

— जोश

3

@ ब्लेक "jQuery" तत्व जैसी कोई चीज नहीं है। यदि आप अपनी क्वेरी से पहला तत्व प्राप्त करना चाहते हैं, तो करें $(mySelector)[0].scrollIntoView()।

— डेरेक 會功夫 ere

4

के लिए 1+ scrollIntoView। 1- इसका उल्लेख करने के लिए।

— याय २

12

मुझे लगता है कि यह बहुत सरल उपाय है:

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

यह तरीका करता है वेबसाइट को फिर से लोड नहीं करती है, और स्क्रीन रीडर के लिए आवश्यक एंकरों पर ध्यान केंद्रित करती है।

— Adam111p
स्रोत

और क्या IE पर शायद ही कभी काम करता है, यह सभी IE पर काम करता है;)

— Adam111p

5

मैं के साथ समाप्त हो गयाwindow.location = window.location.origin + window.location.pathname + '#hash';

— एलेक्स

इसने मेरे लिए पृष्ठ पुनः लोड किया। स्वीकृत उत्तर ने काम करना समाप्त कर दिया, हालाँकि, मेरी इच्छा है कि यह छोटा था।

— होल्डऑफहंगर

3

एक टिप्पणी के लिए पर्याप्त प्रतिनिधि नहीं है।

चयनित उत्तर में getElementById () आधारित विधि काम नहीं करेगी यदि एंकर के पास सेट nameनहीं idहै (जो अनुशंसित नहीं है, लेकिन जंगली में होता है)।

यदि आपके पास दस्तावेज़ मार्कअप (जैसे webextension) का नियंत्रण नहीं है, तो कुछ को ध्यान में रखना।

locationचयनित जवाब में आधारित विधि भी साथ सरल किया जा सकता location.replace:

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

— सीएमसी
स्रोत

1

क्योंकि जब तुम करते हो

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>

— जोनाथन वुकोविच-ट्रिबाउरेट
स्रोत

3

मुझे नहीं लगता कि हैश जोड़ने से यह नया पेज बन जाता है।

— डेरेक 會功夫 ere

5

यह पृष्ठ को पुनः लोड नहीं करता है।

— डेरेक 會功夫 ere

आप सही हैं यह पृष्ठ पुनः लोड नहीं करता है। मैं क्रोम के साथ कंसोल में कोशिश करता हूं और फेविकॉन को फिर से लोड किया जाता है।

— जोनाथन वुकोविच-ट्रिबाउथ

नवीनतम फ़ायरफ़ॉक्स में, हैश परिवर्तन iFrames (src विशेषता में) के लिए पुनः लोड करने के लिए मजबूर करते हैं। मैं इसे एक ब्राउज़र बग मानता हूं, लेकिन इसके बारे में कुछ जानना चाहिए।

— 23

1

मेरे पास एक संकेत के लिए एक बटन है जिसे क्लिक करने पर यह प्रदर्शन संवाद खोलता है और फिर मैं लिख सकता हूं कि मैं क्या खोजना चाहता हूं और यह पृष्ठ पर उस स्थान पर जाता है। यह हेडर का जवाब देने के लिए जावास्क्रिप्ट का उपयोग करता है।

.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 लिखता हूं को प्रॉम्प्ट में , तो यह html फ़ाइल में स्पैन आईडी = "टेस्ट 100" रखा है।

मैं Google Chrome का उपयोग करता हूं।

नोट: यह विचार एक ही पेज पर लिंक करने से आता है

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

जो क्लिक करने पर एंकर को भेजेगा। इसके लिए कई बार काम करने के लिए, अनुभव से पेज को फिर से लोड करने की आवश्यकता होती है।

Stackoverflow (और संभवतः stackexchange, भी) में लोगों को क्रेडिट मैं सभी बिट्स और टुकड़े कैसे इकट्ठा याद नहीं कर सकते। ☺

— S.Doe_Dude
स्रोत