निश्चित पेज हेडर इन-पेज एंकर को ओवरलैप करता है

358

यदि मेरे पास एक HTML पृष्ठ में एक गैर-स्क्रॉलिंग हेडर है, तो शीर्ष पर नियत, एक परिभाषित ऊंचाई है:

क्या #fragmentब्राउज़र में पेज पर एक निश्चित बिंदु तक स्क्रॉल करने के लिए URL एंकर ( भाग) का उपयोग करने का एक तरीका है , लेकिन फिर भी जावास्क्रिप्ट की मदद के बिना निर्धारित तत्व की ऊंचाई का सम्मान करें ?

http://foo.com/#bar
गलत (लेकिन सामान्य व्यवहार): सही:
+ --------------------------------- + + -------------- ------------------- +
| BAR ///////////////////// हैडर | | //////////////////////// हैडर |
+ --------------------------------- + + -------------- ------------------- +
| यहाँ बाकी पाठ है | | बार |
| ... | | |
| ... | | यहाँ बाकी पाठ है |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +
html  url  anchor  fragment 
— Tomalak
स्रोत
3
— 0fnt
13
— ax।
3
@ax हाँ, यह सबसे अच्छा जवाब है। इसके अंदर nicolasgallagher.com/jump-links-and-viewport-positioning/demo भी चेक करें । इसने मेरे लिए सबसे अच्छा काम किया:.dislocate50px, #bar { padding: 50px 0 0; margin: -50px 0 0; -webkit-background-clip: content-box; background-clip: content-box; }
— फ्लान
मैं एक समाधान की मांग कर रहा हूँ जो * एक ही पेज या अन्य पेज से आने वाले एंकरों के लिए काम करता है, * और जो पेज-डाउन की-प्रेस को समायोजित करता है ताकि कंटेंट हेडर से न चिपके, * और जो sib-div footer को अनुमति देता है सामग्री-div के साथ स्क्रॉल करें। अभी तक एक समाधान नहीं मिला है! लेकिन मुझे कहना होगा, मुझे लगता है कि सही तरीका पूरी सामग्री div को लक्षित करेगा, न कि प्रत्येक व्यक्तिगत एंकर को। stackoverflow.com/questions/51070758/…
— जॉनी क्यों
@ax। CSS-tricks.com के बारे में एक बहुत अच्छा नए लेख है scroll-padding-topयहाँ: css-tricks.com/... : अनुरूप जवाब stackoverflow.com/a/56467997/247696
— Flimm

जवाबों:

167

मुझे भी यही समस्या थी। मैंने गद्दी-टॉप वैल्यू के रूप में टॉपबार ऊंचाई के साथ एंकर तत्व में एक वर्ग जोड़कर इसे हल किया।

<h1><a class="anchor" name="barlink">Bar</a></h1>

और फिर बस सीएसएस:

.anchor { padding-top: 90px; }
— MutttenXd
स्रोत
19
@ टोमलाक ध्यान रखें कि यह समाधान पेडिंग क्षेत्र के अंदर लिंक को गैर-क्लिक करने योग्य बनाता है। इसे ठीक करने के लिए आपको z- इंडेक्स का उपयोग करना चाहिए, और एंकर की तुलना में लिंक वैल्यू को अधिक सेट करना होगा। याद रखें कि टॉपबार का z- इंडेक्स वैल्यू सबसे अधिक होना चाहिए, इसलिए जब आप स्क्रॉल करते हैं तो पेज का कंटेंट टॉपबार के ऑनटॉप फ्लोट नहीं करता है।
— MutttenXd
WebKit निश्चित स्थिति बग के कारण Chrome v28 में काम नहीं किया, जिससे हेडर गायब हो गया। इस जवाब ने चाल को मेरा मामला बना दिया।
— 18
2
MuttenXd .. आप मेरे हीरो हैं। मुझे अपनी साइट पर अजीब गैर-फ़ंक्शन लिंक समस्या थी (एंकरों से असंबंधित) मुझे पागल कर रही थी। आपकी गैर-क्लिक करने योग्य टिप्पणी ने वास्तव में मदद की। मैं बड़ा एहसान!
— zipzit
9
जैसा कि रॉय शोआ के जवाब में कहा गया था, margin-top: -90px;पैडिंग द्वारा बनाई गई खाई का मुकाबला करने के लिए जोड़ें ।
— स्किप्पी ले ग्रैंड गौरू
37
मैंने उपयोग किया .anchor:target {padding-top: 90px;}ताकि यह केवल पैडिंग को जोड़े जब वे एंकर टैग का उपयोग करें। यदि पृष्ठ शीर्ष पर लोड होता है तो इस तरह से हमेशा गद्दी का गुच्छा नहीं होता है। केवल तभी जब वह पृष्ठ पर उस विशिष्ट बिंदु को कम करता है।
— jimmyplaysdrums 14
265

यदि आप एक नया वर्ग सेट नहीं करना चाहते हैं या नहीं कर सकते हैं, तो CSS में छद्म श्रेणी के लिए एक निश्चित ऊंचाई ::beforeछद्म तत्व जोड़ें :target:

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

या :targetjQuery के साथ पृष्ठ को स्क्रॉल करें :

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
— एड्रियन गार्नर
स्रोत
30
मुझे वास्तव में आपका समाधान पसंद है। यह मुझे मिला सबसे साफ उपाय है।
— इटाय Grudev
5
यह वह समाधान है जो मेरे पेज लेआउट में कुछ और भराई के बिना मेरे लिए पूरी तरह से काम करता है।
— जेमी कार्ल
2
WebKit में सूची के साथ उपयोग किए जाने पर CSS समाधान में समस्या है। देखें: stackoverflow.com/questions/39547773/…
— मर्ट एस। कपलान
14
यदि लक्ष्य शीर्ष पैडिंग या बॉर्डर है तो यह काम नहीं करेगा क्योंकि यह मार्जिन-पतन पर निर्भर करता है।
— कालिक
9
:targetबस शानदार था!
— अंतहीन
125

मैं इस दृष्टिकोण का उपयोग करता हूं:

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

यह प्रत्येक लक्ष्य से पहले एक अदृश्य तत्व जोड़ता है। यह IE8 + काम करता है।

यहाँ और अधिक समाधान हैं: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

— जेरेमीस एर्ब्स
स्रोत
दिए गए लिंक Badabam को देखें, एक दूसरा उपाय है, जिसका मैं उपयोग करता हूं और जो क्रोम और फ़ायरफ़ॉक्स में काम करता है
— मेहतर
नवीनतम फ़ायरफ़ॉक्स (पीसी पर 55.0.3) पर इसका परीक्षण किया गया और यह अब काम करता है। :-)
— राचीवी
46

आधिकारिक बूटस्ट्रैप अपनाया गया उत्तर:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

क्रेडिट

मर्ज

— blnc
स्रोत
1
इसे शामिल करने के लिए बहुत बहुत धन्यवाद, पूर्णता के लिए +1।
— amjoconn
2
WebKit में सूची के साथ उपयोग किए जाने पर इस समाधान में एक समस्या है। देखें: stackoverflow.com/questions/39547773/…
— मर्ट एस। कपलान
ध्यान दें कि यह काम नहीं करेगा यदि लक्ष्य तत्व खुद के पास हो display: flex;या padding-top। <a name="my_link">{leave this empty}</a>उन मामलों में एक समर्पित लंगर तत्व (जैसे ) का उपयोग करें ।
— वुड्रोशाइगरु
लक्ष्य तत्व <tr>
— Ivan Gusev
42 
html {
  scroll-padding-top: 70px; /* height of sticky header */
}

से: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

— फ्रांकोइस रोमैन
स्रोत
ब्राउज़र का समर्थन: caniuse.com/#feat=mdn-css_properties_scroll-padding-top
— Flim
मेरे लिये कार्य करता है। मैं दूसरे पेज से एंकर के लिए नेविगेट कर रहा हूं। दूसरों ने काम नहीं किया। धन्यवाद!
— davidloper
1
यह एज और सफारी ( Bugs.webkit.org/show_bug.cgi?id=179379 ) पर पूरे पृष्ठ को स्क्रॉल करने के लिए काम नहीं करता है ।
— जुलियस गोंजेरा
1
उद्धारकर्ता! सरल, बिंदु पर। अन्य किसी भी समाधान ने मेरे लिए काम नहीं किया क्योंकि मैं प्रदर्शन का उपयोग कर रहा हूं: फ्लेक्स। एक टन का धन्यवाद, यह सभी समाधानों की कोशिश करते हुए बहुत निराश था।
— प्रिया पय्यावुला
यह एक BEAUTIFUL समाधान है, मैंने स्क्रॉल-व्यवहार का उपयोग किया: चिकनी-महत्वपूर्ण! भी लंगर, वास्तव में के कोड दो पंक्तियों में सरल जाने के लिए
— yehanny
30

इस मुद्दे को संभालने के लिए मुझे जो सबसे अच्छा तरीका मिला, वह है (65px को अपने निर्धारित तत्व ऊंचाई के साथ बदलें):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

यदि आप लक्ष्य चयनकर्ता का उपयोग करना पसंद नहीं करते हैं, तो आप इसे इस तरह से भी कर सकते हैं:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

नोट: यह उदाहरण काम नहीं करेगा यदि लक्ष्य तत्व में एक बैकगाउंड रंग है जो उसके माता-पिता से अलग है। उदाहरण के लिए:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

इस स्थिति में मेरे लक्ष्य तत्व का हरा रंग 65px में उसके मूल लाल तत्व को अधिलेखित कर देगा। मुझे इस मुद्दे को संभालने के लिए कोई शुद्ध सीएसएस समाधान नहीं मिला, लेकिन अगर आपके पास एक और पृष्ठभूमि का रंग नहीं है तो यह समाधान सबसे अच्छा है।

— रॉय शोआ
स्रोत
2
सभी उत्तरों में से, केवल यही एक है जिसने मेरे लिए काम किया है!
— जेवियर एरियस
18

जबकि प्रस्तावित समाधानों में से कुछ उसी पृष्ठ के भीतर खंड लिंक (= हैश लिंक) के लिए काम करते हैं (जैसे एक मेनू लिंक जो नीचे स्क्रॉल होता है), मैंने पाया कि उनमें से कोई भी वर्तमान क्रोम में काम नहीं करता है जब आप अन्य से आने वाले टुकड़े लिंक का उपयोग करना चाहते हैं पृष्ठों ।

तो www.mydomain.com/page.html#foo को स्क्रेच से कॉल करना किसी भी दिए गए CSS समाधान या जेएस समाधान के साथ वर्तमान क्रोम में आपके लक्ष्य को ऑफसेट नहीं करेगा ।

समस्या के कुछ विवरणों का वर्णन करने वाली एक jQuery बग रिपोर्ट भी है।

समाधान

एकमात्र विकल्प जो मैंने अब तक पाया है कि वास्तव में क्रोम में काम करता है जावास्क्रिप्ट है जिसे ऑनडोमरी नहीं कहा जाता है लेकिन देरी के साथ।

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

सारांश

JS देरी समाधान के बिना शायद फ़ायरफ़ॉक्स, IE, सफारी में काम करेगा, लेकिन क्रोम में नहीं।

— Jpsy
स्रोत
3
मैं उसी निष्कर्ष और समाधान पर आया हूं। ऐसा लगता है जैसे हर शरीर बाहरी लिंक के बारे में भूल रहा है जो हैशटैग का उपयोग करता है।
— AJJ
मुझे आज वह समस्या है और मैंने आपके समाधान का उपयोग किया है। हालांकि ऐसा लगता है कि आपको टाइमआउट की जरूरत नहीं है। यह IIFE के रूप में भी काम करता है।
— kwiat1990
1
@ kwiat1990: हां, यह संभव हो सकता है - लेकिन केवल अगर आपके जेएस को HTML कोड के बहुत अंत में रखा गया है। अन्यथा आपका स्क्रॉल लक्ष्य अभी तक DOM में नहीं हो सकता है। दरअसल यह onDomReady का उपयोग करने का पूरा बिंदु है। इसलिए मुझे लगता है कि टाइमआउट संस्करण जाने का स्थिर तरीका है।
— जेपीसी
यह उत्तर केवल वही था जो बाहरी लिंक के लिए काम करता था। हालांकि यह मेरे लिए काम नहीं करता है जब लिंक को एक ही पृष्ठ में कहा जाता है :( कोई भी विचार?
— अगस्ता समीर बैरिएन्टोस
@Augusto क्या आपको कोई हल मिला? मुझे भी यही समस्या हो रही है।
— जेसी
9

जैसा कि सीएसएस स्क्रॉल स्नैप कल्पना खेल में आता है, यह scroll-margin-topसंपत्ति के साथ आसानी से संभव है। वर्तमान में क्रोम और ओपेरा (अप्रैल 2019) पर चलता है। इसके अलावा सफारी 11+ को इसका समर्थन करना चाहिए, लेकिन मैं इसे सफारी 11 पर चलाने में असमर्थ था। संभवत: हमें इसे खत्म करने के लिए लोगों का इंतजार करना होगा।

कोडपेन उदाहरण

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}
<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>
स्निपेट का विस्तार करें

— dakur
स्रोत
1
वह बहुत प्यारी है। चलो आशा है कि यह अधिक व्यापक रूप से अपनाया जाता है!
— तोमलक
बीच क्या अंतर है scroll-padding-topऔर scroll-margin-top?
— फ्लिम्स
scroll-margin-topइस उपयोग के मामले के लिए दुर्भाग्य से सफारी 11-13 में लागू नहीं किया गया है: bugs.webkit.org/show_bug.cgi?id=189265
— fabb
सफारी में इसे कहा जाता है scroll-snap-margin-top: caniuse.com/#search=scroll-margin-top
— Mu-Tsun Tsai
@ मु-त्सुतसाई यह कुछ अधिक जटिल है। यह वास्तव में सफारी पर मौजूद है, लेकिन यह स्क्रॉल-टू-टुकड़ा व्यवहार के साथ काम नहीं करता है। मेरी टिप्पणी को ब्राउज़र-
— कॉम्पट
8

Chrome / Safari / Firefox के लिए, आप display: blockऑफसेट को क्षतिपूर्ति करने के लिए नकारात्मक जोड़ सकते हैं और नकारात्मक मार्जिन का उपयोग कर सकते हैं , जैसे:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

उदाहरण देखें http://codepen.io/swed/pen/RrZBJo

— MrSwed
स्रोत
7

आप इसे jQuery के साथ कर सकते हैं:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);
— webvitaly
स्रोत
".Getget" नहीं, "होना चाहिए: लक्ष्य"
— Mert S. Kaplan
@ MertS.Kaplan ".target" वर्ग 'लक्ष्य' है।
— webvitaly
7

बस एक और शुद्ध सीएसएस समाधान की खोज की जो मेरे लिए एक आकर्षण की तरह काम करता है!

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

इस साइट पर मिला !

— jamawe
स्रोत
2
कुछ अन्य लोगों ने इससे पहले कि आप इस समाधान की खोज की है, पेज 1 पर जवाब देखें, उदाहरण के लिए stackoverflow.com/a/56467997/18771
— टॉमालक
क्षमा करें, ध्यान नहीं दिया! धन्यवाद!
— जम्हाई
यह एज और सफारी ( Bugs.webkit.org/show_bug.cgi?id=179379 ) पर पूरे पृष्ठ को स्क्रॉल करने के लिए काम नहीं करता है ।
— जुलियस गोंजेरा
5

आप यह कोशिश कर सकते हैं:

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

अपने हेडर की वास्तविक ऊंचाई के लिए शीर्ष पैडिंग मान सेट करें। यह आपके हेडर के शीर्ष पर एक मामूली अतिरिक्त अंतर पेश करेगा, लेकिन यह केवल तभी दिखाई देगा जब उपयोगकर्ता लंगर में कूदता है और फिर स्क्रॉल करता है। मैंने अभी अपनी साइट के लिए वह समाधान बनाया है, लेकिन यह केवल पृष्ठ के शीर्ष पर एक छोटी सी निश्चित पट्टी दिखाता है, कुछ भी अधिक नहीं।

— ygoe
स्रोत
MH। बुरा नहीं है, लेकिन अभी भी काफी हैक (और IE में काम नहीं करता है, दुख की बात है)।
— तोमलक
5

मैंने इसे ऊपर दिए गए "एंकर: बिफोर" विधि का उपयोग करके सीएसएस और HTML के साथ आसानी से काम कर लिया है। मुझे लगता है कि यह सबसे अच्छा काम करता है, क्योंकि यह आपके divs के बीच बड़े पैमाने पर पैडिंग नहीं बनाता है।

.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}

यह पृष्ठ पर पहली div के लिए काम नहीं करता है, लेकिन आप उस पहले div में पैडिंग जोड़कर काउंटर कर सकते हैं।

#anchor-one{padding-top: 60px;}

यहाँ एक काम कर रहे बेला है: http://jsfiddle.net/FRpHE/24/

— एरिक लकड़ी
स्रोत
5

इससे मेरा काम बनता है:

HTML एंकर के लिए लिंक:

<a href="#security">SECURITY</a>

HTML एंकर:

<a name="security" class="anchor"></a>

सीएसएस:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}
— Avila
स्रोत
4

मैं @ Jpsy के उत्तर का उपयोग कर रहा हूं, लेकिन प्रदर्शन कारणों से मैं केवल टाइमर सेट कर रहा हूं यदि URL में हैश मौजूद है।

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; // minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };
— sandre89
स्रोत
ओपी ने जावास्क्रिप्ट का उपयोग नहीं करने के लिए कहा।
— गिउलिओ कैसिन
बाहरी लिंक के साथ काम करता है लेकिन इन-पेज लिंक के साथ नहीं।
— स्नैप करें
4

मुझे यहाँ और कई अन्य उत्तरों से बहुत परेशानी हुई क्योंकि मेरे बुकमार्क किए गए एंकर एक FAQ पृष्ठ में सेक्शन हेडर थे, इसलिए हेडर को ऑफसेट करने से मदद नहीं मिली क्योंकि बाकी सामग्री बस वहीं रहेगी जहाँ वह थी। इसलिए मैंने सोचा कि मैं पोस्ट करूंगा।

मैंने जो कुछ किया वह कुछ समाधानों का एक संयोजन था:

  1. सीएसएस:

    .bookmark {
    margin-top:-120px;
    padding-bottom:120px; 
    display:block;
}

जहां "120px" आपकी निश्चित हेडर ऊंचाई (शायद प्लस कुछ मार्जिन) है।

  1. बुकमार्क लिंक HTML:

    <a href="#01">What is your FAQ question again?</a>

  2. बुकमार्क की गई सामग्री HTML:

    <span class="bookmark" id="01"></span>
<h3>What is your FAQ question again?</h3>
<p>Some FAQ text, followed by ...</p>
<p>... some more FAQ text, etc ...</p>

इस समाधान के बारे में अच्छी बात यह है कि spanतत्व न केवल छिपा हुआ है, यह अनिवार्य रूप से ढह गया है और आपकी सामग्री को पैड नहीं करता है।

मैं इस समाधान के लिए ज्यादा श्रेय नहीं ले सकता क्योंकि यह अलग-अलग संसाधनों से आता है, लेकिन इसने मेरी स्थिति में मेरे लिए सबसे अच्छा काम किया।

आप यहां वास्तविक परिणाम देख सकते हैं ।

— SteveCinq
स्रोत
1
साझा करने के लिए बहुत - बहुत धन्यवाद! धागा जितना पुराना है, इस समस्या का एक भी विहित समाधान नहीं है।
— तोमलक
1
+ SteveCinq आपने मेरे दिमाग को पढ़ा - मैं उन्हीं मुद्दों का सामना कर रहा था जहाँ साझा समाधान भविष्यवाणी के अनुसार काम नहीं कर रहे थे। में जोड़ा जा रहा है <span>अवधि में लंगर के साथ, गद्दी और मार्जिन मेरे लिए काम किया में जोड़ने के साथ। थ्रेड की उम्र के बावजूद इस उत्तर को प्रस्तुत करने के लिए समय निकालने के लिए बहुत बहुत धन्यवाद!
— जुड़वाँब
4

मैं ऊपर सूचीबद्ध उत्तर के साथ कोई भाग्य नहीं था और इस समाधान का उपयोग करके समाप्त हो गया जो पूरी तरह से काम करता है ...

एक रिक्त अवधि बनाएँ जहाँ आप अपना लंगर सेट करना चाहते हैं। 

<span class="anchor" id="section1"></span>
<div class="section"></div>

और निम्न वर्ग को लागू करें:

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

यह समाधान तब भी काम करेगा जब वर्गों में अलग-अलग रंग की पृष्ठभूमि हो! मुझे इस लिंक पर समाधान मिला ।

— मैट अंडरवुड
स्रोत
1
क्या यह ठीक वैसा ही तरीका नहीं है जैसा कि गिलियूम ले मिएरे और कुछ अन्य लोगों ने इस धागे में दिखाया है?
— तोमलक
यह बहुत समान है लेकिन मुझे लगता है कि इसे समझना आसान है और अधिक विस्तृत प्रतिक्रिया एक बाहरी स्रोत से और भी अधिक गहन लिंक के साथ।
— मैट अंडरवुड
यह एक ही समाधान है, लेकिन मैं इसे आसानी से समझ सकता हूं और इसका पालन कर सकता हूं। दूसरों ने मुझे पर्याप्त जानकारी नहीं दी।
— मैक्रों
3

यह मेरे शुद्ध दिमाग के लिए कुछ हद तक आसान लगता है लेकिन एक सीएसएस-केवल समाधान के रूप में आप :targetचयनकर्ता का उपयोग करके सक्रिय लंगर वाले तत्व को पैडिंग जोड़ सकते हैं :

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}
<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
स्निपेट का विस्तार करें

— Moob
स्रोत
1
यह बिल्कुल भी हैक नहीं है! अच्छा समाधान।
— तोमलक
3

मैंने पाया कि मुझे MutttenXd के दोनों और Badabam के CSS समाधानों का एक साथ उपयोग करना था, क्योंकि पहला क्रोम में काम नहीं करता था और दूसरा फ़ायरफ़ॉक्स में काम नहीं करता था:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...
— tshalif
स्रोत
3

जिस तरह से मुझे सबसे साफ लगता है वह निम्नलिखित है:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }
— गिलौम ले मिरे
स्रोत
2

JQuery का उपयोग करते हुए एक न्यूनतम घुसपैठ दृष्टिकोण:

संपर्क:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

सामग्री:

<h3 id="my-anchor-1">Here is Anchor 1</a>

स्क्रिप्ट:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

लिंक के लिए एंकर-लिंक क्लास को असाइन करने से, अन्य लिंक (जैसे अकॉर्डियन या टैब कंट्रोल) का व्यवहार प्रभावित नहीं होता है।

यह प्रश्न जावास्क्रिप्ट नहीं चाहता है, लेकिन इस एक के कारण अन्य अधिक लोकप्रिय प्रश्न बंद है और मैं वहां जवाब नहीं दे सकता।

— हुसेन येल्लि
स्रोत
2

मुझे कुछ ऐसा चाहिए था जो इनबाउंड लिंक, पेज पर लिंक के लिए काम करता हो, और जिसे JS द्वारा लक्षित किया जा सकता है ताकि पेज हेडर की ऊंचाई में बदलाव का जवाब दे सके।

एचटीएमएल

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2>

सीएसएस

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

z-index: -1खंड-लक्ष्य के ऊपर 'गद्दी क्षेत्र' में लिंक को अभी भी क्लिक करने योग्य होने अनुमति देता है, जैसा कि उनके उत्तर पर @MuttenXd द्वारा टिप्पणी की गई है

मुझे IE 11, एज 15+, क्रोम 38+, एफएफ 52+, या सफारी 9.1+ में अभी तक कोई समस्या नहीं मिली है

— अर्थ
स्रोत
1 
<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

इस कोड को ट्रिक करना चाहिए। अपने हेडर बार की ऊंचाई के लिए 45px स्वैप करें।

संपादित करें: यदि jQuery का उपयोग करना एक विकल्प है, तो मैं ऑफसेट मूल्य सेट के साथ jQuery.localScroll का उपयोग करके भी सफल रहा हूं। ऑफसेट विकल्प jQuery.scrollTo का एक हिस्सा है, जिस पर jQuery.localScroll बनाया गया है। एक डेमो यहां उपलब्ध है: http://demos.flesler.com/jquery/scrollTo/ ('ऑफसेट के तहत दूसरी विंडो')

— fourk
स्रोत
यह समाधान वास्तव में काम करता है, लेकिन यह बुलेटप्रूफ नहीं है और इसके लिए अलग-अलग ब्राउज़रों के लिए बहुत अधिक परिशोधन की आवश्यकता है :( अच्छा प्रयास करें। मैं अतिरिक्त मार्कअप के बिना एक समाधान की तलाश कर रहा हूं।
— vlad saling
शर्म आती है यह इतना गड़बड़ है, इसका मतलब है कि आप सिर्फ आईडी का उपयोग नहीं कर सकते। समाधान खोजना पसंद करेंगे, मैंने हर तरह की कोशिश की है।
— सिद्धांत
1

यहाँ एक पूर्ण jquery समाधान है जो IE में काम करेगा:

मान लीजिए कि नेविगेशन बार तत्व कुछ इस प्रकार हैं:

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

आप स्क्रॉल को ऑफसेट करने के लिए निम्न jquery स्निपेट का उपयोग कर सकते हैं:

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}
— बिजली
स्रोत
मैं थंडर से इस कोड के थोड़ा संशोधित संस्करण का उपयोग करने में सक्षम था। मैंने इस पृष्ठ पर और stackoverflow.com/questions/10732690/… पर और stackoverflow.com/questions/10732690/… पर कई सीएसएस-ओनली और सरल समाधानों की कोशिश की, लेकिन वे मेरी आवश्यकताओं के कारण उपयोग करने योग्य नहीं थे। पृष्ठ कई एंकरों के साथ एक एफएक्यू पृष्ठ है, जिससे पृष्ठ पर और बाहर दोनों तरफ से स्थिति आ सकती है, इसलिए बहुत सारे रिक्त स्थान हो सकते हैं। अगली टिप्पणी में जारी ....
— जेफरी साइमन
1
मेरे लिए यह काम करने के लिए, यहाँ मामूली परिवर्तन हैं: (1) ऑन-पेज नेविगेशन की अनुमति देने के लिए href.index लाइन में "<=" बदलना; (२) परिवर्तन "a.navigation" जिसे मेरे उपयोग के लिए "# आफ़ाक" होना था; (3) मोबाइल या डेस्कटॉप में अंतर के लिए window.innerWidth पर आधारित topary = 250 से एक ternary में परिवर्तन var; (४) ४०० को चेतन में १ में बदल दें, क्योंकि एनीमेशन वांछित नहीं है और ० काम नहीं करता है; (5) अगर ($ ('मेरा-पेज-चयनकर्ता') को जोड़ने की जरूरत है, तो अनाम फ़ंक्शन में ऑफ़स्सेटस्क्रोलफ़ॉर्मलोलेशन को कॉल करने से पहले लंबाई उन पृष्ठों पर अनावश्यक कॉल को रोकने के लिए जहां आवश्यक नहीं है।
— जेफरी साइमन
1

कार्यान्वित किए गए :beforeमहान का उपयोग करते हुए जब तक हमें एहसास नहीं हुआ कि छद्म तत्व वास्तव में पॉइंटर घटनाओं को कवर और अवरुद्ध कर रहा है जो भीतर बैठे थे जो छद्म तत्व के क्षेत्र के । pointer-events: noneपर कुछ का उपयोग करना:before या यहाँ तक कि सीधे लंगर पर कोई को प्रभावित किया था।

हमने जो किया, वह एंकर की स्थिति को निरपेक्ष बना रहा था और फिर इसे समायोजित करने के लिए निश्चित क्षेत्र की ऑफसेट / ऊंचाई होने की स्थिति थी।

पॉइंटर इवेंट्स को ब्लॉक किए बिना ऑफसेट लंगर

.section-marker {

    position: absolute;
    top: -300px;
}

इसके साथ मूल्य यह है कि हम उन 300px के भीतर आने वाले किसी भी तत्व को रोक नहीं रहे हैं। नकारात्मक पक्ष यह है कि जावास्क्रिप्ट से उस तत्व की स्थिति को हथियाने को ध्यान में रखने की आवश्यकता है ताकि किसी भी तर्क को समायोजित किया जा सके।

— skabob11
स्रोत
1

जब मैंने नेविगेशन पर क्लिक किया तो यह मुझे उचित स्थान पर जाने के लिए मिला। मैंने नेविगेशन क्लिक के लिए एक इवेंट हैंडलर जोड़ा। फिर आप ऑफसेट पर जाने के लिए बस "स्क्रॉलबी" का उपयोग कर सकते हैं।

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });
— माइल मिजाटोविक
स्रोत
2
समस्या को हल करता है, लेकिन "जावास्क्रिप्ट की मदद के बिना" भाग नहीं ...
— टॉमालक
1

मैंने कुछ लाइन ब्रेक के साथ एक div बनाया और उस आईडी को दिया, मैंने तब कोड डाल दिया जिसे मैं नीचे दिखाना चाहता था। फिर लिंक आपको छवि के ऊपर के स्थान पर ले जाएगा और हेडर अब इस तरह से नहीं होगा:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

बेशक, आप अपनी आवश्यकताओं के अनुरूप लाइन ब्रेक की संख्या को बदल सकते हैं। यह मेरे लिए पूरी तरह से काम करता है, यह सुनिश्चित नहीं है कि क्या कोई समस्या है, हालांकि, मैं अभी भी HTML सीख रहा हूं।

— गुमनाम
स्रोत
व्यावहारिक, लेकिन एक नकारात्मक पहलू है - यह केवल एक पृष्ठ पर पहली शीर्षक के लिए काम करता है। यदि अधिक शीर्षक हैं, तो आप पाठ में बड़े अंतराल को <br>प्रत्येक शीर्षक से पहले टैग के कारण देखना शुरू करेंगे ।
— टॉमालक
1

इस स्क्रिप्ट का इस्तेमाल किया 

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

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});
— आदिल मेमन
स्रोत
कृपया समझाने की कोशिश करें कि आपको क्यों लगता है कि यह स्क्रिप्ट समस्या का समाधान करेगी
— अली कनाट
1

मुझे लगता है कि यह दृष्टिकोण अधिक उपयोगी है:

<h2 id="bar" title="Bar">Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}
— शाहीन को घेरता है
स्रोत
1

अब आप स्क्रॉल-मार्जिन-टॉप का उपयोग कर सकते हैं , जो कि बहुत व्यापक रूप से अपनाया गया है ।

बस निम्नलिखित सीएसएस को उस तत्व में जोड़ें जिसे आप स्क्रॉल करना चाहते हैं:

.element {
  scroll-margin-top: 2em;
}
— dutzi
स्रोत
— टॉमालक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.