एमडी-सामग्री के अंदर तत्वों में एंकर लिंक का उपयोग कैसे करें?

Question

हाल ही में मैंने जिस वेबसाइट पर काम कर रहा था, उसके लिए Angular material पर स्विच किया गया था, जिसमें क्लिक करने वाले बटन के साथ एक नेविबार (अब एक टूलबार) था, जो पृष्ठ पर अनुभागों पर स्क्रॉल करेगा।

अब

, उपकरण पट्टी shrink प्रभाव है और स्क्रॉल पर फिर से प्रकट करने के लिए मैं सही उपकरण पट्टी के बाद एक md-सामग्री घटक पर पेज की सामग्री डाल करने के लिए किया था, लेकिन यह सब लंगर लिंक कार्यक्षमता तोड़ दिया ...

मैं इसके लिए एक फिक्स नहीं मिल रहा है, वे केवल तभी काम करते हैं जब स्क्रोल करने योग्य तत्व शरीर होता है लेकिन यह है कि मैं सिकुड़ प्रभाव, लहर प्रभाव को खो देता हूं और यहां तक ​​कि एक अजीब दिखने वाला sidenav ...

प्रासंगिक कोड:

सीएसएस:

body{ 
    overflow-y: hidden; 
} 
#main-content{ 
    height: 100vh; 
} 

HTML:

<md-toolbar md-scroll-shrink> 
    (...) 
    <md-button href="#leave-email">Click</md-button> 
</md-toolbar> 
<md-content id="main-content"> 
    (...) 
    <md-button href="#leave-email">Click</md-button> 
    (lot of stuff) 
    <section id="leave-email">(...)</section> 
</md-content> 

ऊपर दिए गए बटनों में से कोई भी काम करते हैं, जैसा कि पहले मैं एक चिकनी स्क्रॉल के लिए Angular smooth scroll उपयोग कर रहा था, लेकिन मैं इसे हटा दिया इस हल करने की कोशिश करते हुए।

Answer 1

यह आवश्यकतः अधिकांश तत्वों के लिए काम नहीं कर सकता है; ऐसा इसलिए है क्योंकि सभी तत्वों में एचआरईएफ विशेषता नहीं है। इस के चारों ओर एक रास्ता नीचे की तरह onClick विधि (बटन HREF नहीं है या तो विशेषता) का उपयोग करने के लिए है:

<button onClick="location.href = 'http://google.co.uk/';"></button> 

लेकिन जब इस का उपयोग करते हुए, अपने कर्सर, डिफ़ॉल्ट कर्सर के रूप में रहना होगा तो यह अधिक बनाने के लिए एक टैग के HREF की तरह, आप जोड़ सकते हैं: onMouseOver="this.style.cursor = 'pointer';" और onMouseOut="this.style.cursor = 'default';"

चेक नीचे इस उदाहरण:

<button onMouseOver="this.style.cursor = 'pointer';" onMouseOut="this.style.cursor = 'default';" onclick="location.href = 'http://google.co.uk/';">Click Here</button>

उम्मीद है कि यह मदद करता है!