অ্যাঙ্কর লিঙ্কটি উপরে কিছু পিক্সেল যেতে যেখানে এটি লিঙ্ক করা হয়েছে তৈরি করুন

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

— Flen

Answer 1

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

এটি ব্রাউজারটিকে আমাদের জন্য অ্যাঙ্কারে ঝাঁপিয়ে দেওয়ার কাজ করতে দেয় এবং তারপরে আমরা সেই অবস্থানটি অফসেট করতে ব্যবহার করব।

সম্পাদনা 1:

@Erb দ্বারা নির্দেশিত হিসাবে, হ্যাশ পরিবর্তন করার সময় আপনি কেবল পৃষ্ঠায় থাকলে এটি কাজ করবে। #somethingইতোমধ্যে ইউআরএল থাকা পৃষ্ঠাটি প্রবেশ করা উপরের কোডটির সাথে কাজ করে না। এটি পরিচালনা করার জন্য এখানে আরও একটি সংস্করণ রয়েছে:

// 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অফসেটটি জোর করার কোনও ইভেন্ট নেই ।

এই সমাধানটি @ ম্যাভের পরামর্শের খুব সামান্য পরিবর্তিত সংস্করণ এবং সরলতার জন্য 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);

এই উদাহরণের জন্য জেএসফিডেল এখানে

Comments

এটি কেবলমাত্র তখনই কার্যকর হয় যখন ব্যবহারকারী ইতিমধ্যে পৃষ্ঠায় রয়েছে, উদাহরণস্বরূপ যখন ব্যবহারকারী example.com/#anchorথেকে দেখা যায় না example.com/about/।

— ERB

ধন্যবাদ @ আরব। ওপি-র প্রশ্নে সেই মামলাটির প্রয়োজন হয়নি, তবে অন্যকে সহায়তা করার জন্য আমি প্রয়োগের আরও একটি সংস্করণ যুক্ত করেছি।

— এরিক ওলসন

এখনও একটি ছোটখাট বিবরণ অনুপস্থিত। যদি আপনি কোনও অ্যাঙ্কারে ক্লিক করেন, তবে উপরে স্ক্রোল করুন আবার একই অ্যাঙ্করটিকে আবার ক্লিক করুন, কোনও হ্যাশচেঞ্জ নেই তাই এটি অফসেটটি ব্যবহার করবে না। ধারনা?

— টিও মারাগাকিস

আপনি যেতে পারেন $('a[href^="#"]').on('click', function() { offsetAnchor(); });। এইভাবে, যদি hrefকোনও aউপাদানটির একটি দিয়ে শুরু হয় #, আপনি একই ফাংশনটিকে কল করুন।

— মাভে

JQuery এর প্রয়োজন নেই - শুধু প্রতিস্থাপন $(window).on("hashchange",সঙ্গেwindow.addEventListener("hashchange",

— নিয়ন

Answer 2

কেবল সিএসএস নিয়ে কাজ করা আপনি নোঙ্গর করা উপাদানগুলিতে একটি প্যাডিং যুক্ত করতে পারেন (উপরের সমাধান হিসাবে) অপ্রয়োজনীয় সাদা স্থান এড়াতে আপনি একই উচ্চতার নেতিবাচক মার্জিন যুক্ত করতে পারেন:

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

এটি যে কোনও ক্ষেত্রেই সেরা সমাধান কিনা তা আমি নিশ্চিত নই, তবে এটি আমার পক্ষে ভাল কাজ করে।

Comments

যদি এর উপরে 50px এর মধ্যে কোনও লিঙ্ক থাকে, তবে এটি coveredেকে দেওয়া যেতে পারে এবং আমার বিশ্বাসযোগ্য হয় না

— অ্যান্ড্রু

@ অ্যান্ড্রু এটি আই 10 বা ক্রোমে কোনও সমস্যা বলে মনে হচ্ছে না।

— Sinister দাড়ি

আপনি position: relativeCSS সম্পত্তি ব্যবহার করে একই কাজ করতে পারেন । সুতরাং, এটির মতো হবেposition: relative; top: -50px;

— এলেকস দোরোহোভিচ

@ অ্যালেক্সডোরোহোভিচ - আপনি এটি পৃথক উত্তর হিসাবে পোস্ট করতে পারেন যেহেতু এটি বিদ্যমানগুলির তুলনায় অনন্য।

— বিএসএমপি

আমার পৃষ্ঠাটি বন্য হয়ে গেছে ... * _ *

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

আমি আপনার সমাধানটিকে পছন্দ করি কারণ এটি জাভাস্ক্রিপ্ট ব্যবহার করে না। ধন্যবাদ!

— রোজারিও রুশো

আমি এই উত্তর বুঝতে পারি না। আপনি কি এই লিঙ্কটি অবজেক্টে বা অবজেক্টের সাথে উল্লেখ করছেন?

— সিজোরিও

বুটস্ট্র্যাপ স্থির-শীর্ষ নববারের সাথে খুব দরকারী

— বাইরে_বক্স

@ সিজেরিও যদি আমি এটি সঠিকভাবে বুঝতে পারি তবে এটি (জ্ঞানের) নোঙ্গর উপাদান তৈরি করে ("ক" এর পরিবর্তে "স্প্যান" এর মতো অন্য কিছু হতে পারে) এবং এটি তুলনামূলকভাবে নীচে অবস্থান করে, যাতে এতে থাকা অ্যাঙ্করটি href="#anchor"সেখানে নির্দেশ করে, পরিবর্তে <p>সরাসরি উপাদানটির দিকে ইঙ্গিত করার পরিবর্তে । কিন্তু এক সাবধানবাণী: ব্যবহার idপরিবর্তে nameHTML5 এর মধ্যে, দেখুন: stackoverflow.com/questions/484719/html-anchors-with-name-or-id

— Flen

সত্যিই আরও ভাল সমাধান :)

— ববি এক্স

Answer 4

এর জন্য ২০২০ এর উত্তর এখানে:

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

কারণ এটি ব্যাপকভাবে সমর্থিত !

Comments

ডাউনভোটেড কারণ এটি দুর্দান্ত হবে তবে এটি ব্যাপকভাবে সমর্থিত নয়। অপেরা মোবাইল / মিনি বা সাফারি ব্রাউজার / আইওএস নয়, এমনকি প্রথম এজও পুরোপুরি সমর্থন করে না।

— বেদা শ্মিড

সমস্ত ব্রাউজারের সামান্য কম 90% (স্ক্রোল-স্ন্যাপ-মার্জিন-শীর্ষ সহ আইওএস) জাভাস্ক্রিপ্ট সমাধানটি থেকে বেরিয়ে আসার জন্য যথেষ্ট হওয়া উচিত, বিশেষত যদি ব্যবহারকারীর প্রভাবটি কেবল স্ক্রোল করে চলেছে to তবে ওহে, আসুন এই পদ্ধতির কারও ক্ষতি করার আগে তাকে নীচে নামিয়ে দেওয়া যাক।

— ব্যবহারকারীর 127091 13

এ জাতীয় একটি সহজ এবং কাজের উত্তর। শীঘ্রই পর্যাপ্ত পরিমাণে (আধুনিক ব্রাউজারগুলির জন্য) 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

কেন এটি সেরা সমাধান? এছাড়াও, যদি আপনি কোনও উত্তর দিয়ে কিছু স্তরের ব্যাখ্যা / যুক্তি দেন তবে এটি অনেক বেশি সহায়ক helpful

— ফিল হিলি

আপনি যেভাবেই কোনও অ্যাঙ্কর তৈরি করতে এইচটিএমএল যুক্ত করছেন, স্প্যান যুক্ত করা খুব বেশি আলাদা নয়। তারপরে আপনি কিছুটা সিএসএস যুক্ত করে কোনও বাগ অর্জন না করেই এই সমস্যার সমাধান করতে পরিচালনা করেন; অন্য কিছু সমাধান করতে পারে।

— সানড্রে

Answer 6

এটি jQuery ছাড়াই এবং পৃষ্ঠা লোডে কাজ করবে।

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

Comments

আমার জন্য কাজ করে এবং সিএসএস পদ্ধতিতে এটির একটি সুবিধা রয়েছে যা এটি কোনও পৃষ্ঠার সমস্ত হ্যাশ লোকেশনের ক্ষেত্রে প্রযোজ্য , যাতে আপনাকে অন্তর্ভুক্ত প্রতিটি হ্যাশ সহ একটি স্টাইল লিখতে না হয় এবং আপনি যখন অন্য একটি প্যারা যুক্ত করেন তখন স্টাইলটি সংশোধন করতে ভুলবেন না একটি নতুন হ্যাশ এটির উপরে @ ব্যবহারকারী 3364768 এর উত্তরের হিসাবে উপরে 100px (বা যাই হোক না কেন) প্রসারিত ছাড়াই ব্যাকগ্রাউন্ড রঙের সাথে লক্ষ্যকে স্টাইল করার অনুমতি দেয়, যদিও এটির একটি পথ রয়েছে।

— ডেভিড

Answer 7

কোনও উপাদানের সাথে লিঙ্ক তৈরি করতে, এবং তারপরে সেই অবস্থানটিকে 'পজিশন' করতে পাতার উপরের দিক থেকে একটি নির্বিচার দূরত্ব, খাঁটি সিএসএস ব্যবহার করে আপনাকে ব্যবহার করতে হবে 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

এটির সাথে একমাত্র সমস্যা হ'ল এটি এখন পৃষ্ঠার আরও নিচে আসল ডিভ ঠেলে। আদর্শভাবে, অ্যাঙ্কর লিঙ্কটি সাধারণত হিসাবে এটি 100px কম যেতে হবে less এটি অর্জনের জন্য আমি প্রয়োজনে জেএস বা jQuery ব্যবহার করতে রাজি আছি।

— দাম্পত্য

এটি সমস্যার সমাধান করে না, এটি উপাদানটির আগে কেবল সাদা স্থান যুক্ত করে।

— এক্সসিএস

ব্যবহারকারী 1925805: একটি জাভাস্ক্রিপ্ট সমাধানের জন্য আপডেট উত্তর দেখুন। @ ক্রিস্টি: আমি জানি , আমি পরিষ্কারভাবে বলেছি যে উত্তরে নিজেই: উপাদানটি এখনও উইন্ডোর শীর্ষে অবস্থিত, তবে এটি দৃশ্যমানভাবে শীর্ষ থেকে কিছুটা দূরে অবস্থিত বলে মনে হয় ।

— ডেভিড মনিকা 22

আপনার জেএস সহ সেরা, পরিষ্কার সমাধান। ধন্যবাদ এটি আমার জন্য খুব ভাল কাজ করে!

— ড্যানিয়েলাবি 67

এটি কেবল পৃষ্ঠাগুলির মধ্যে হ্যাশ-চেঞ্জের কাজ করে। তবে আইডি দিয়ে ব্যবহারটি পুনঃনির্দেশিত হয়েছে, তারপরে এটি কার্যকর হয় না

— রোহান খুদে

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;
    });
});

আপনার অ্যাঙ্কর লিঙ্কের সাথে খাপ খাইয়ে দিতে কেবল টটপ -৯৯ পরিবর্তন করুন।

Answer 9

আপনি যদি স্পষ্টভাবে অ্যাঙ্কর নাম ব্যবহার করেন তবে,

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

তারপরে CSS এ আপনি কেবল সেট করতে পারেন

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

এটি ততক্ষণ কাজ করবে যতক্ষণ না আপনার এইচআরএফ অ্যাঙ্কর ট্যাগগুলি কোনও 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।

নন-আইই ব্রাউজারগুলিতে এবং 9 সংস্করণ 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>

অথবা ইকো লিঙ্ক ট্যাগের জন্য এই পিএইচপি কোডটি ব্যবহার করুন:

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

Answer 17

আমি জানি যে এটি কিছুটা দেরি হয়ে গেছে, তবে আপনি যদি বুটস্ট্র্যাপের স্ক্রোলস্পি ব্যবহার করেন তবে আপনার কোডটি দেওয়ার জন্য আমি খুব গুরুত্বপূর্ণ কিছু পেয়েছি। ( http://getbootstrap.com/ javascript /# scrolspy )

এটি আমাকে কয়েক ঘন্টা বাদাম চালাচ্ছিল।

স্ক্রোল স্পাইয়ের অফসেটটি উইন্ডো.স্রোকল এর সাথে মেলে বা অন্যথায় আপনি এর ঝুঁকিটি চালাবেন:

1. স্ক্রোল করার সময় একটি অদ্ভুত ঝলকানো প্রভাব পাওয়া
2. আপনি দেখতে পাবেন যে আপনি যখন নোঙ্গরগুলিতে ক্লিক করেন, আপনি সেই বিভাগে নামবেন, তবে স্ক্রোল স্পাই ধরে নিবে আপনি এটির উপরে একটি বিভাগ।

 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

স্নিপেটে কেবল জেএস? এটি কোনও কাজই করবে না

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%। এক্ষেত্রে এই ডিভটি অ্যাংকার এলিমেন্টের শীর্ষে এসে শেষ হয়ে গেছে এবং আপনি যে অ্যাংকারে স্ক্রোল করতে হবে সেখানেই শুরু করুন। এখন আমি যা করি তা হ'ল এই পরম ডিভ এবং অ্যাং ওয়ার্কের অ্যাংকার লিঙ্ক সেট করে :)

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

যে মূলত হিসাবে একই উত্তর এই এক । আপনি যদি পুরানো প্রশ্নের উত্তর পোস্ট করেন তবে নতুন কিছু যুক্ত করার চেষ্টা করুন। উদাহরণস্বরূপ, আপনি কেন এটি কাজ করে তা বর্ণনা করতে পারেন।

— আর্টজম বি।

আমি যুক্তি দিয়েছি যে কোনও উত্তরে এটি কেন কাজ করে সে সম্পর্কে কিছু ধরণের বর্ণনা থাকতে হবে। ;-)

— ফিল হিলি