jQuery के बिना स्क्रॉल/आईडी पर जाएं

मैंने उपयोग करने योग्य समाधान के लिए बहुत से विषयों की खोज की है।
लेकिन कुछ नहीं मिला। अधिकांश स्क्रिप्ट मेरे उद्देश्यों के लिए बहुत ही अव्यवस्थित हैं।
केवल जावास्क्रिप्ट पर आधारित समाधान की तलाश है। मेरी परियोजना में jQuery का उपयोग करना संभव नहीं है।
मुझे आईडी पर कूद या स्क्रॉल की आवश्यकता है।
jQuery के बिना स्क्रॉल/आईडी पर जाएं

<head> 
<script type="text/javascript"> 
//here has to go function 
</script> 
</head>

मेरी कॉल है:

<a onclick="function_call+targetname"><img src="image1" alt="name1"></a> 
<a onclick="function_call+targetname"><img src="image2" alt="name2"></a> 
<a onclick="function_call+targetname"><img src="image3" alt="name3"></a>

तो मैं अपने नेविगेशन में ऑनक्लिक ईवेंट उपयोग करना होगा।

अब onclick मैं कूद या मेरे पेज में एक div id के लिए स्क्रॉल करना चाहते हैं:

<div id="target1">some content</div> 
<div id="target2">some content</div> 
<div id="target3">some content</div>

यह बहुत महत्वपूर्ण है: एचटीएमएल लंगर दुर्भाग्य से काम नहीं। अन्यथा सब कुछ बहुत आसान होगा।

मैं उपयोग बस bevore है:

onclick="window.location.hash='target';"

लेकिन मैं eBay में प्रतिबंध है। वे इस सरल कोड की अनुमति नहीं देते हैं।

इसके अलावा मैं बाहरी जावास्क्रिप्ट को कॉल नहीं कर सकता (केवल मुख्य क्षेत्र में जेएस का उपयोग करें)। इसके अलावा, इसका उपयोग करना संभव नहीं है: "कुकी।", "कुकी", "प्रतिस्थापित करें (", IFRAME, मेटा या शामिल) और बेस href।

यह किसी विशिष्ट बिंदु पर जेएस कूद के साथ मुश्किल नहीं हो सकता है। मुझे विशेष प्रभाव की आवश्यकता नहीं है।

क्या किसी के पास पतला और सहायक समाधान है?

मुझे अपने स्वयं के समाधान और ओक्सी के लिए धन्यवाद मिला है। मैं आपके तरीके का पालन करता हूं।

मेरे सभी समाधान में रुचि रखने वालों के लिए:

<head> <script type="text/javascript"> function scroll(element){ 
var ele = document.getElementById(element); 
window.scrollTo(ele.offsetLeft,ele.offsetTop); } </script> </head>

नेविगेशन कॉल:

<a onclick='scroll("target1");'><img src="image1" alt="name1"></a>

अब आप बुलाया आईडी

साथ एक div पर जा सकते हैं

<div id="target1">CONTENT</div>

स्रोत

2012-11-07 user1805546

"एचटीएमएल एंकर काम नहीं करते" का क्या मतलब है - आपने इसे कैसे कार्यान्वित किया ?? – Leon

एंकर टैग उपयोग href पर

और नहीं onclick

<a href="#target1">asdf<a>

और div:

<div id="target1">some content</div>

स्रोत

2012-11-07 09:35:35 Rusty

मैं एंकर – user1805546

का उपयोग नहीं कर सकता हूं, आप पहले से ही अपने एचटीएमएल में एंकर टैग का उपयोग कर रहे हैं .. इसलिए आपको सुझाव दिया गया है। – Rusty

कोड नीचे आप

var objControl=document.getElementById("divid"); 
objControl.scrollTop = objControl.offsetTop;

स्रोत

2012-11-07 09:37:30 Oxi

क्या यह 'objControl.scrollTop' की बजाय' document.body.scrollTop' होना चाहिए? –

@Oxi var मैं सिर क्षेत्र में स्थापित किया गया है और मैं उपयोग पर क्लिक करें? – user1805546

@ उपयोगकर्ता 1805546 आपके ऑनक्लिक श्रोता में div की आईडी का उपयोग उदाहरण के लिए 'target1' – Oxi

हो सकता है कि आप scrollIntoView की कोशिश करनी चाहिए मदद कर सकता है।

document.getElementById('id').scrollIntoView();

यह आपके तत्व पर स्क्रॉल करेगा।

स्रोत

2014-05-02 07:05:08 Aaki

बस एक नोट: 'आईडी' का उपयोग करते समय, सुनिश्चित करें कि आप इसे '#' चिह्न से पूर्ववत नहीं करते हैं। उदाहरण के लिए, यदि आप आईडी 'myDiv' के साथ एक div पर कूदना चाहते हैं, तो कोड होगा:' document.getElementById ('myDiv')। ScrollIntoView(); ' – Devner

यह एक प्रयोगात्मक सुविधा है, केवल फ़ायरफ़ॉक्स पर काम कर रहा है वर्तमान समय https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView –

यह क्रोम पर 1-26-2017 –

Oxi के जवाब

सिर्फ wrong.¹ है क्या आप चाहते हैं:

var container = document.body, 
element = document.getElementById('ElementID'); 
container.scrollTop = element.offsetTop;

कार्य उदाहरण:

(function(){ 
    var i = 20, l = 20, html = ''; 
    while (i--){ 
    html += '<div id="DIV' +(l-i)+ '">DIV ' +(l-i)+ '</div>'; 
    html += '<a onclick="document.body.scrollTop=document.getElementById(\'DIV' +i+ '\').offsetTop">'; 
    html += '[ Scroll to #DIV' +i+ ' ]</a>'; 
    html += '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />'; 
    } 
    document.write(html); 
})();

मैं काफी प्रतिष्ठा नहीं मिला है उसके जवाब पर टिप्पणी करने से ¹

स्रोत

2017-11-10 21:35:52 anonQ

यदि आप चिकनी स्क्रॉलिंग चाहते हैं तो behavior कॉन्फ़िगरेशन जोड़ें।

document.getElementById('id').scrollIntoView({ 
    behavior: 'smooth' 
});

स्रोत

2018-02-21 08:18:55 agriboz

jQuery के बिना स्क्रॉल/आईडी पर जाएं

उत्तर

संबंधित मुद्दे