एंकर लिंक बनाएं कुछ पिक्सेल ऊपर जाएं जहां यह जुड़ा हुआ है

Question

मुझे इस प्रश्न के लिए पूछने / खोजने का सबसे अच्छा तरीका यकीन नहीं है:

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

इसका कोई मतलब भी है क्या? क्या यह संभव है?

कोड दिखाने के लिए संपादित - यह केवल एक एंकर टैग है:

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

Comments

डुप्लिकेट? stackoverflow.com/questions/11386807/…

— XCS

संबंधित: stackoverflow.com/questions/4086107/…

— उड़ाएं

Answer 1

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

यह ब्राउज़र को हमारे लिए लंगर तक कूदने का काम करने की अनुमति देगा और फिर हम उस स्थिति का उपयोग ऑफसेट करने के लिए करेंगे।

संपादित करें 1:

जैसा कि @erb द्वारा बताया गया था, यह केवल तभी काम करता है जब आप पृष्ठ पर हों, जबकि हैश को बदल दिया जाए। #somethingURL में पहले से ही पेज दर्ज करना उपरोक्त कोड के साथ काम नहीं करता है। यहाँ एक और संस्करण है जिसे संभालने के लिए:

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

नोट: jQuery का उपयोग करने के लिए, आप बस के window.addEventListenerसाथ बदल सकते हैं$(window).on उदाहरणों के हैं। धन्यवाद @ नीयन।

संपादित करें 2:

जैसा कि कुछ लोगों ने बताया, यदि आप एक ही एंकर लिंक पर लगातार दो या अधिक बार क्लिक करते हैं, तो उपरोक्त विफल हो जाएगा क्योंकि ऐसा नहीं है hashchange ऑफसेट को बाध्य करने के लिए घटना ।

यह समाधान @Mave से सुझाव का थोड़ा संशोधित संस्करण है और सादगी के लिए jQuery चयनकर्ताओं का उपयोग करता है

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

इस उदाहरण के लिए JSFiddle यहां है

Comments

यह केवल तब काम करता है जब उपयोगकर्ता पहले से ही पृष्ठ पर है, यह उदाहरण के लिए नहीं है जब उपयोगकर्ता example.com/#anchorसे जाता है example.com/about/।

— एर

धन्यवाद @ आरबी। ओपी के प्रश्न को उस मामले की आवश्यकता नहीं थी, लेकिन दूसरों की मदद करने के लिए मैंने कार्यान्वयन का एक और संस्करण जोड़ा।

— एरिक ओलसन

अभी भी एक मामूली विस्तार याद आ रहा है। यदि आप एक एंकर पर क्लिक करते हैं, तो स्क्रॉल करें फिर उसी एंकर पर फिर से क्लिक करें, कोई हैशचेंज नहीं है इसलिए यह ऑफसेट का उपयोग नहीं करेगा। विचार?

— तेओ मारागाकिस

आप के लिए जा सकते हैं $('a[href^="#"]').on('click', function() { offsetAnchor(); });। इस तरह, यदि hrefकिसी aतत्व का प्रारंभ a से होता है #, तो आप उसी फ़ंक्शन को कहते हैं।

— मेव

JQuery की जरूरत नहीं है - बस के $(window).on("hashchange",साथ बदलेंwindow.addEventListener("hashchange",

— नियॉन

Answer 2

केवल सीएसएस के साथ काम करने से आप लंगर वाले तत्व के लिए एक पैडिंग जोड़ सकते हैं (जैसा कि ऊपर दिए गए समाधान में है) अनावश्यक व्हाट्सएप से बचने के लिए आप उसी ऊंचाई का नकारात्मक मार्जिन जोड़ सकते हैं:

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

मुझे यकीन नहीं है कि यह किसी भी मामले में सबसे अच्छा समाधान है, लेकिन यह मेरे लिए ठीक काम करता है।

Comments

अगर इसके ऊपर 50px के भीतर कोई लिंक है, तो इसे कवर किया जा सकता है और इसे अस्पष्ट माना जा सकता है

— एंड्रयू

@ और कहा कि IE10 या क्रोम पर कोई समस्या नहीं है।

— सिनिस्टर बियर्ड

आप position: relativeसीएसएस संपत्ति का उपयोग करके भी ऐसा कर सकते हैं। तो, यह ऐसा होगाposition: relative; top: -50px;

— एलेक्स डोरोविच दो

@AleksDorohovich - आप इसे एक अलग उत्तर के रूप में पोस्ट कर सकते हैं क्योंकि यह मौजूदा लोगों के लिए अद्वितीय है।

— बीएसएमपी

मेरा पृष्ठ जंगली चला गया ... * _ *

Answer 3

इससे भी बेहतर उपाय:

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

बस स्थिति <a> अपेक्षाकृत स्थिति वाले ऑब्जेक्ट के अंदर पूर्ण स्थिति के साथ टैग लगाएं।

पृष्ठ में प्रवेश करते समय या पृष्ठ के भीतर एक हैश परिवर्तन के द्वारा काम करता है।

Comments

मैं आपके समाधान को पसंद करता हूं क्योंकि यह जावास्क्रिप्ट का उपयोग नहीं करता है। धन्यवाद!

— रोजारियो रूसो

मुझे यह उत्तर समझ में नहीं आता है। क्या आप इस लिंक को ऑब्जेक्ट या ऑब्जेक्ट के लिए संदर्भित कर रहे हैं?

— CZorio

बूटस्ट्रैप फिक्स्ड-टॉप

— नेबर्स के

@CZorio अगर मुझे यह सही लगा, तो यह (सरलता से) एक एंकर तत्व बनाना (कुछ और हो सकता है, जैसे "स्पैन" की जगह "ए") और इसे अपेक्षाकृत नीचे रखना, ताकि इसमें मौजूद एंकर href="#anchor"वहीं बात करे, <p>सीधे तत्व को इंगित करने के बजाय । लेकिन एक चेतावनी: एचटीएमएल 5 के idबजाय उपयोग करें name, देखें: stackoverflow.com/questions/484719/html-anchors-with-name-or-id

— flen

सचमुच एक बेहतर समाधान :)

— बॉबी एक्स

Answer 4

इसके लिए यहां 2020 का जवाब दिया गया है:

#anchor {
  scroll-margin-top: 100px;
}

क्योंकि यह व्यापक रूप से समर्थित है !

Comments

नीच क्योंकि यह अच्छा होगा, यह व्यापक रूप से समर्थित नहीं है। न तो ओपेरा मोबाइल / मिनी, और न ही सफारी ब्राउज़र / आईओएस, यहां तक ​​कि पहला एज भी पूरी तरह से समर्थन नहीं करता है।

— बेडा श्मिद

सभी ब्राउज़रों के 90% से कम (incl। IOS स्क्रॉल-स्नैप-मार्जिन-टॉप के साथ) एक जावास्क्रिप्ट समाधान से बाहर निकलने के लिए पर्याप्त होना चाहिए, खासकर यदि उपयोगकर्ता प्रभाव सिर्फ स्क्रॉल करने के लिए है। लेकिन हे, चलो किसी को परेशान करने से पहले इस दृष्टिकोण को नीचा दिखाते हैं।

— user127091

ऐसा सरल और काम करने वाला जवाब। जल्द ही (आधुनिक ब्राउज़रों के लिए) 100% समर्थन तक पहुंच जाएगा।

— लियोनेल बेसेरा

Answer 5

सबसे अच्छा उपाय

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

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

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

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

Comments

यह सबसे अच्छा समाधान क्यों है? इसके अलावा, यदि आप किसी उत्तर के साथ स्पष्टीकरण / तर्क के कुछ स्तर देते हैं तो यह बहुत अधिक उपयोगी है।

— फिल हीली

जैसा कि आप एक एंकर को बनाने के लिए HTML जोड़ रहे हैं, एक स्पैन जोड़ना ज्यादा अलग नहीं है। फिर बस थोड़ा सा सीएसएस जोड़कर आप बिना किसी कीड़े को प्राप्त किए इस समस्या को हल करने का प्रबंधन करते हैं; जैसा कि कुछ अन्य समाधान कर सकते हैं।

— सोंद्रे

Answer 6

यह jQuery के बिना और पेज लोड पर काम करेगा।

(function() {
    if (document.location.hash) {
        setTimeout(function() {
            window.scrollTo(window.scrollX, window.scrollY - 100);
        }, 10);
    }
})();

Comments

मेरे लिए काम करता है, और एक सीएसएस विधि पर लाभ है कि यह एक पृष्ठ पर सभी हैश स्थानों पर लागू होता है , ताकि आप प्रत्येक हैश के साथ एक शैली लिखने की जरूरत नहीं है और जब आप एक और पैरा जोड़ते हैं तो शैली को संशोधित करना याद रखें एक नया हैश यह किसी को भी पृष्ठभूमि रंग के साथ लक्ष्य को स्टाइल करने की अनुमति देता है, इसके बिना @ user3364768 से उत्तर में 100px (या जो भी) का विस्तार होता है, हालांकि एक तरीका यह है कि।

— डेविड

Answer 7

किसी तत्व से लिंक करने के लिए, और फिर पृष्ठ के शीर्ष से एक मनमाना दूरी का तत्व, शुद्ध CSS का उपयोग करके, आपको उपयोग करना होगा padding-top, इस तरह से तत्व अभी भी खिड़की के शीर्ष पर स्थित है, लेकिन यह उदाहरण के लिए, दृश्य-पोर्ट के शीर्ष से कुछ दूरी पर, दिखाई देता है :

<a href="#link1">Link one</a>
<a href="#link2">Link two</a>

<div id="link1">
    The first.
</div>

<div id="link2">
    The second.
</div>

सीएसएस:

div {
    /* just to force height, and window-scrolling to get to the elements.
       Irrelevant to the demo, really */
    margin-top: 1000px;
    height: 1000px;
}

#link2 {
    /* places the contents of the element 100px from the top of the view-port */
    padding-top: 100px;
}

जेएस फिडेल डेमो ।

सादे जावास्क्रिप्ट दृष्टिकोण का उपयोग करने के लिए:

function addMargin() {
    window.scrollTo(0, window.pageYOffset - 100);
}

window.addEventListener('hashchange', addMargin);

जेएस फिडेल डेमो ।

Comments

इसके साथ एकमात्र समस्या अब यह है कि वास्तविक div पृष्ठ को और नीचे धकेलता है। आदर्श रूप से, एंकर लिंक सिर्फ 100px कम होगा जितना कि सामान्य रूप से होता है। यदि यह आवश्यक है तो मैं JS या jQuery का उपयोग करने के लिए तैयार हूं।

— डेमोन

यह समस्या को हल नहीं करता है, यह बस तत्व से पहले सफेद स्थान जोड़ता है।

— XCS

user1925805: जावास्क्रिप्ट समाधान के लिए अद्यतन उत्तर देखें। @Cristy: मुझे पता है , मैंने स्पष्ट रूप से कहा था कि उत्तर में ही: तत्व अभी भी खिड़की के शीर्ष पर स्थित है, लेकिन ऐसा लगता है कि, ऊपर से कुछ दूरी पर, दिखाई दे रहा है ।

— डेविड का कहना है कि मोनिका

सबसे अच्छा, अपने जेएस के साथ स्वच्छ समाधान। धन्यवाद यह मेरे लिए बहुत अच्छा काम करता है!

— डैनियलएबी

यह केवल काम करता है हैशटेग पृष्ठ के भीतर हुआ। लेकिन उपयोग आईडी के साथ पुनर्निर्देशित हो गया, फिर यह काम नहीं करता है

— रोहन खुदे

Answer 8

यह काम करना चाहिए:

    $(document).ready(function () {
    $('a').on('click', function (e) {
        // e.preventDefault();

        var target = this.hash,
            $target = $(target);

       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-49
    }, 900, 'swing', function () {
    });

        console.log(window.location);

        return false;
    });
});

बस .top-49 को बदलें जो आपके एंकर लिंक के साथ फिट बैठता है।

Answer 9

यदि आप स्पष्ट एंकर नामों का उपयोग करते हैं जैसे,

<a name="sectionLink"></a>
<h1>Section<h1>

फिर सीएसएस में आप बस सेट कर सकते हैं

A[name] {
    padding-top:100px;
}

यह तब तक काम करेगा जब तक आपका HREF एंकर टैग NAME विशेषता निर्दिष्ट नहीं करता है

Comments

धन्यवाद। यह इस सूची से एकमात्र समाधान है जिसने मेरे लिए काम किया।

— मिकीबनी

Answer 10

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

// The function actually applying the offset
function offsetAnchor() {
    if (location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
$(window).on("hashchange", function () {
    offsetAnchor();
});

// Let the page finish loading.
$(document).ready(function() {
    offsetAnchor();
});

इससे हमें उस मनमाने कारक से भी छुटकारा मिल जाता है।

Answer 11

इस कोड को आज़माएं, लिंक पर क्लिक करने पर यह पहले से ही एक चिकनी एनीमेशन है।

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

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top - 100
    }, 500);
});

Answer 12

सबसे आसान उपाय:

सीएसएस

#link {
    top:-120px; /* -(some pixels above) */
    position:relative;
    z-index:5;
}

एचटीएमएल

<body>
    <a href="#link">Link</a>
    <div>
        <div id="link"></div> /*this div should placed inside a target div in the page*/
        text
        text
        text
    <div>
</body>

Answer 13

थॉमस के समाधान का एक प्रकार: सीएसएस तत्व> तत्व चयनकर्ता यहां काम कर सकते हैं:

सीएसएस

.paddedAnchor{
  position: relative;
}
.paddedAnchor > a{
  position: absolute;
  top: -100px;
}

एचटीएमएल

<a href="#myAnchor">Click Me!</a>

<span class="paddedAnchor"><a name="myAnchor"></a></span>

लिंक पर एक क्लिक स्क्रॉल स्थिति को 100px से ऊपर ले जाएगा जहां एक वर्ग के साथ तत्व paddedAnchorतैनात है।

गैर-IE ब्राउज़र में समर्थित है, और IE में संस्करण 9 से। IE 7 और 8 पर समर्थन के लिए, <!DOCTYPE>घोषित किया जाना चाहिए।

Answer 14

मैंने सिर्फ अपने लिए एक आसान उपाय खोजा। 15px का मार्जिन-टॉप था

एचटीएमएल

<h2 id="Anchor">Anchor</h2>

सीएसएस

h2{margin-top:-60px; padding-top:75px;}

Answer 15

केवल सीएसएस का उपयोग करना और पहले कवर की गई और अकल्पनीय सामग्री के साथ कोई समस्या नहीं है (इसका बिंदु सूचक-घटनाएं हैं: कोई नहीं):

सीएसएस

.anchored::before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 100px;
    margin-top: -100px;
}

एचटीएमएल

<a href="#anchor">Click me!</a>
<div style="pointer-events:none;">
<p id="anchor" class="anchored">I should be 100px below where I currently am!</p>
</div>

Answer 16

इसे इस शैली में रखें:

.hash_link_tag{margin-top: -50px; position: absolute;}

और divलिंक से पहले अलग-अलग टैग में इस वर्ग का उपयोग करें , उदाहरण:

<div class="hash_link_tag" id="link1"></div> 
<a href="#link1">Link1</a>

या इको लिंक टैग के लिए इस php कोड का उपयोग करें:

function HashLinkTag($id)
{
    echo "<div id='$id' class='hash_link_tag'></div>";
}

Answer 17

मुझे पता है कि यह थोड़ा देर से है, लेकिन मुझे आपके कोड में कुछ महत्वपूर्ण बात मिली अगर आप बूटस्ट्रैप के स्क्रैपी का उपयोग कर रहे हैं। ( http://getbootstrap.com/javascript/#scrollspy )

यह मुझे घंटों पागल कर रहा था।

स्क्रॉल जासूस के लिए ऑफ़सेट विंडो से मेल खाना चाहिए।

1. स्क्रॉल करते समय एक अजीब झिलमिलाहट प्रभाव हो रहा है
2. Youll पाते हैं कि जब आप एंकर पर क्लिक करते हैं, तो आप उस सेक्शन में लैंड करेंगे, लेकिन स्क्रॉल जासूस मान लेंगे कि आप इसके ऊपर एक सेक्शन हैं।

 var body = $('body');
    body.scrollspy({
        'target': '#nav',
        'offset': 100 //this must match the window.scrollY below or you'll have a bad time mmkay
});

$(window).on("hashchange", function () {
        window.scrollTo(window.scrollX, window.scrollY - 100);
});

Comments

स्निपेट में केवल js? यह कोई फर्क नहीं पड़ता कि क्या काम करेगा

Answer 18

@ एरिक ओल्सन समाधान के आधार पर , लंगर तत्व को शामिल करने के लिए थोड़ा संशोधित करें जिसे मैं विशेष रूप से जाना चाहता हूं

// Function that actually set offset
function offsetAnchor(e) {
    // location.hash.length different to 0 to ignore empty anchor (domain.me/page#)
    if (location.hash.length !== 0) {
        // Get the Y position of the element you want to go and place an offset
        window.scrollTo(0, $(e.target.hash).position().top - 150);
    }
}

// Catch the event with a time out to perform the offset function properly
$(document).on('click', 'a[href^="#"]', function (e) {
    window.setTimeout(function () {
        // Send event to get the target id later
        offsetAnchor(e);
    }, 10);
});

Answer 19

मुझे बस यही समस्या है। मेरे पास एक नेवी पिक्स की हुई है और मैं चाहता हूं कि एंकाउंटर नौसेना के तहत शुरू हो। window.addEventListener...मेरे लिए काम नहीं करने का समाधान क्योंकि मैंने अपना पृष्ठ सेट किया है scroll-behavior:smoothताकि यह कोण पर स्क्रॉल करने के बजाय ऑफसेट सेट हो । setTimeout()काम करता है, तो समय अंत करने के लिए स्क्रॉल के लिए anough है लेकिन यह अभी भी अच्छी लग रही नहीं। इसलिए मेरा समाधान था, अंगकोर में एक पॉज़िटेड पूर्ण डिव को जोड़ना, height:[the height of the nav]और bottom:100%। इस स्थिति में यह div एंगकोर तत्व के शीर्ष पर समाप्त हो गया, और उस स्थिति पर शुरू करें जहां आप को स्क्रॉल करने के लिए एंगकोर क्या है। अब मैं जो कुछ भी करता हूं वह इस पूर्ण div और कोण से किए गए कोण लिंक को सेट करता है :)

html,body{
    margin:0;
    padding:0;
    scroll-behavior:smooth;
}

nav {
    height:30px;
    width:100%;
    font-size:20pt;
    text-align:center;
    color:white;
    background-color:black;
    position:relative;
}

#my_nav{
    position:fixed;
    z-index:3;
}
#fixer_nav{
    position:static;
}

#angkor{
    position:absolute;
    bottom:100%;
    height:30px;
}

<nav id="my_nav"><a href="#angkor">fixed position nav<a/></nav>
<nav id="fixer_nav"></nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.
</p>

<nav><div id="angkor"></div>The angkor</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.

</p>

Answer 20

मैं इसी तरह के मुद्दे का सामना कर रहा था और मैंने निम्नलिखित कोड का उपयोग करके हल किया

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        var desiredHeight = $(window).height() - 577;
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

Answer 21

<a href="#anchor">Click me!</a>

<div style="margin-top: -100px; padding-top: 100px;" id="anchor"></div>
<p>I should be 100px below where I currently am!</p>

Comments

यह अनिवार्य रूप से इस एक के रूप में एक ही जवाब है । यदि आप पुराने प्रश्न के उत्तर देते हैं, तो कुछ नया जोड़ने का प्रयास करें। उदाहरण के लिए, आप वर्णन कर सकते हैं कि क्यों काम करता है।

— आर्टजोम बी।

मेरा तर्क है कि किसी भी उत्तर में किसी प्रकार का विवरण होना चाहिए कि यह क्यों काम करता है। ;-)

— फिल हीली