স্থির পৃষ্ঠার শিরোনামটি ইন-পৃষ্ঠা অ্যাঙ্করগুলিকে ওভারল্যাপ করে

Question

যদি আমার এইচটিএমএল পৃষ্ঠায় একটি অ-স্ক্রোলিং শিরোলেখ থাকে তবে শীর্ষে স্থির করা হয়েছে, একটি নির্ধারিত উচ্চতা রয়েছে:

#fragmentব্রাউজারটি পৃষ্ঠার একটি নির্দিষ্ট বিন্দুতে স্ক্রোল করার জন্য ইউআরএল অ্যাঙ্কর ( অংশ) ব্যবহার করার কোনও উপায় আছে তবে জাভাস্ক্রিপ্টের সাহায্য ছাড়াই স্থির উপাদানটির উচ্চতার প্রতি শ্রদ্ধা রয়েছে ?

http://foo.com/#bar

ভুল (তবে সাধারণ আচরণ): সঠিক:
+ --------------------------------- + + -------------- ------------------- + +
| বার ///////////////////// শিরোনাম | | ///////////////////////// শিরোনাম |
+ --------------------------------- + + -------------- ------------------- + +
| এখানে লেখাটির বাকি অংশ | | বার |
| ... | | |
| ... | | এখানে লেখাটির বাকি অংশ |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- + +

Comments

সম্পর্কিত: stackoverflow.com/questions/10732690/...

— 0fnt

css-tricks.com/hash-tag-links-padding

— ax।

@ হ্যাঁ, এটি সেরা উত্তর। এছাড়াও এর অভ্যন্তরে নিকোলাসগালাগের . com/jump-links- এবং- ভিউপোর্ট- অবস্থান / অবস্থান পরীক্ষা করুন de এটি আমার জন্য সেরা কাজ:.dislocate50px, #bar { padding: 50px 0 0; margin: -50px 0 0; -webkit-background-clip: content-box; background-clip: content-box; }

— Flen

আমি এমন একটি সমাধান খুঁজছি যা * একই পৃষ্ঠা বা অন্যান্য পৃষ্ঠা থেকে আগত নোঙ্গরদের জন্য কাজ করে *, এবং যা পৃষ্ঠা-ডাউন কী-প্রেসকে সামঞ্জস্য করে যাতে সামগ্রীটি হেডার দ্বারা ক্লিপ না হয়, * এবং যা সিআইবি-ডিভ ফুটারকে অনুমতি দেয় কন্টেন্ট-ডিভ দিয়ে স্ক্রোল আপ করুন। এখনও কোন সমাধান খুঁজে পেল না! তবে আমার অবশ্যই বলতে হবে, আমি মনে করি সঠিক উপায়ে পুরো বিষয়বস্তু ডিভকে লক্ষ্য করবে, এবং প্রতিটি স্বতন্ত্র অ্যাঙ্করকে নয়। stackoverflow.com/questions/51070758/...

— জনি কেন

@ax। CSS-tricks.com সম্পর্কে অনেক ভালো নতুন নিবন্ধ প্রকাশিত হয় scroll-padding-topএখানে: css-tricks.com/... : সংশ্লিষ্ট উত্তর stackoverflow.com/a/56467997/247696

— Flimm

Answer 1

আমারও একই সমস্যা ছিল। প্যাডিং-শীর্ষ মান হিসাবে শীর্ষবারের উচ্চতা সহ নোঙ্গর উপাদানটিতে একটি শ্রেণি যুক্ত করে আমি এটি সমাধান করেছি।

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

এবং তারপর কেবল CSS:

.anchor { padding-top: 90px; }

Comments

@ টমলাক সচেতন থাকুন যে এই সমাধানটি প্যাডিং অঞ্চলের লিঙ্কগুলিকে অ-ক্লিকযোগ্যযোগ্য করে তোলে। এটি ঠিক করার জন্য আপনাকে অবশ্যই জেড-ইনডেক্স ব্যবহার করতে হবে এবং লিংকগুলির মান অ্যাঙ্কারের চেয়ে বেশি সেট করতে হবে। মনে রাখবেন আপনার শীর্ষস্থানীয়ের সর্বাধিক জেড-সূচক মান হওয়া উচিত, সুতরাং আপনি যখন স্ক্রোল করবেন তখন পৃষ্ঠার সামগ্রীগুলি শীর্ষবারের শীর্ষে ভাসতে পারে না।

— মটেনএক্সডি

ওয়েবকিট স্থির অবস্থানের বাগের কারণে শিরোনামটি অদৃশ্য হয়ে যাওয়ার কারণে ক্রোম ভি 28 এ কাজ করেনি । এই উত্তরটি আমার মামলায় চালাকি করেছিল did

— কনিককেদী

মাটন এক্সডি .. আপনি আমার নায়ক আমার সাইটে আমার অদ্ভুত নন-ফাংশন লিঙ্ক সমস্যা ছিল (অ্যাঙ্করগুলির সাথে সম্পর্কিত নয়) আমাকে পাগল করছে। আপনার ক্লিকযোগ্য নয় এমন মন্তব্য সত্যিই সাহায্য করেছে। ইয়া বড় পাওনা!

— জিপজিট

রায় margin-top: -90px;শোয়ার উত্তরে যেমন পরামর্শ দেওয়া হয়েছে, প্যাডিংয়ের মাধ্যমে সৃষ্ট ব্যবধানটি মোকাবেলায় যুক্ত করুন।

— স্কিপি লে গ্র্যান্ড গৌরু

আমি .anchor:target {padding-top: 90px;}এমনটি ব্যবহার করেছি যাতে এঙ্কর ট্যাগ ব্যবহার করার সময় এটি কেবল প্যাডিং যুক্ত করে। এই পৃষ্ঠায় শীর্ষে পৃষ্ঠাটি লোড করা থাকলে সর্বদা একগুচ্ছ প্যাডিং থাকে না। কেবলমাত্র যখন এটি পৃষ্ঠায় একটি নির্দিষ্ট পয়েন্ট লোড করে।

— jimmyplaysdrums

Answer 2

আপনি যদি নতুন ক্লাস সেট করতে না পারেন বা না চান তবে ::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);

Comments

আমি আপনার সমাধানটি সত্যিই পছন্দ করি। এটি আমার কাছে পাওয়া সবচেয়ে পরিষ্কার সমাধান।

— Itay গ্রুদেভ

এটি আমার সমাধান পৃষ্ঠাগুলির বিন্যাসে অন্য কোনও জিনিস না ভরিয়ে পুরোপুরি নিখুঁতভাবে কাজ করেছে solution

— জেমি কার্ল

ওয়েবকিটে তালিকার সাথে সিএসএস সমাধান ব্যবহার করার সময় একটি সমস্যা রয়েছে a দেখুন: স্ট্যাকওভারফ্লো.com

— প্রশ্নগুলি

লক্ষ্যটির শীর্ষ প্যাডিং বা সীমানা থাকলে এটি কাজ করবে না কারণ এটি মার্জিন-পতনের উপর নির্ভর করে।

— ক্রুলিক

:targetশুধু উজ্জ্বল ছিল!

— অন্তহীন

Answer 3

আমি এই পদ্ধতির ব্যবহার:

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

Comments

লিংক Badabam প্রদান তাকান, সেখানে একটি দ্বিতীয় সমাধান, যা আমি ব্যবহার করেন এবং যা Chrome এ কাজ করে এবং ফায়ারফক্স

— মেথর

এটি সর্বশেষতম ফায়ারফক্সে (পিসিতে 55.0.3) পরীক্ষিত এবং এটি এখন কাজ করে। :-)

— রাচিভি

Answer 4

অফিসিয়াল বুটস্ট্র্যাপ গৃহীত উত্তর:

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

ক্রেডিট

একত্রিত করা

Comments

এটি অন্তর্ভুক্ত করার জন্য অনেক ধন্যবাদ, সম্পূর্ণতার জন্য +1।

— amjoconn

ওয়েবকিটে তালিকার সাথে ব্যবহার করার সময় এই সমাধানটিতে একটি সমস্যা রয়েছে। দেখুন: স্ট্যাকওভারফ্লো.com

— জিজ্ঞাসা

লক্ষ্য করুন যে যদি লক্ষ্য উপাদানটি নিজেই থাকে display: flex;বা ঘটে তবে এটি কাজ করবে না padding-top। এই ক্ষেত্রে একটি উত্সর্গীকৃত অ্যাঙ্কর উপাদান (পছন্দ <a name="my_link">{leave this empty}</a>) ব্যবহার করবেন না।

— উড্রোশিগেরু

লক্ষ্য উপাদানটি <tr> হলে

— ইভান গুসেভ

Answer 5

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

থেকে: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Comments

ব্রাউজার সহায়তা: caniuse.com/#feat=mdn-css_properties_scroll-padding-top

— Flimm

আমার জন্য কাজ কর. আমি অন্য পৃষ্ঠা থেকে অ্যাঙ্কারে নেভিগেট করছি। অন্যরা কাজ করেনি। ধন্যবাদ!

— ডেভিডলপার

এটি এজ এবং সাফারি ( bugs.webkit.org/show_bug.cgi?id=179379 ) এ পুরো পৃষ্ঠাটি স্ক্রোল করার জন্য কাজ করে না ।

— জুলিয়াসজ গোনেরা

ত্রাতা! সহজ, পয়েন্টে। অন্য কোনও সমাধান আমার পক্ষে কাজ করেনি কারণ আমি প্রদর্শন: ফ্লেক্স ব্যবহার করছি। একটি টন ধন্যবাদ, এটি সমস্ত সমাধান চেষ্টা করে হতাশ ছিল।

— প্রিয়া পাইয়াভুলা

এটি একটি সুন্দর সমাধান, আমি স্ক্রোল-আচরণ ব্যবহার করেছি: মসৃণ! গুরুত্বপূর্ণ; অ্যাঙ্কর যেতে, কোড দুটি লাইনে সত্যিই সহজ

— ইয়াহ্নি

Answer 6

আমি এই সমস্যাটি হ্যান্ডেল করার সবচেয়ে ভাল উপায়টি হ'ল (আপনার নির্দিষ্ট উপাদানটির উচ্চতার সাথে 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 এ ওভাররাইট করবে। আমি এই সমস্যাটি পরিচালনা করার জন্য কোনও খাঁটি সিএসএস সমাধান পাইনি তবে আপনার যদি অন্য কোনও পটভূমি রঙ না থাকে তবে এই সমাধানটি সেরা।

Comments

সমস্ত উত্তরের মধ্যে, এই একমাত্র আমার পক্ষে কাজ করেছে!

— জাভিয়ের আরিয়াস

Answer 7

প্রস্তাবিত সমাধানের কিছু টুকরা লিঙ্ক (= হ্যাশ সংযোগগুলি) জন্য কাজ করার সময় মধ্যে , আমি দেখেছি তাদের মধ্যে যে কেউ বর্তমান Chrome কাজ যখন আপনি টুকরা লিঙ্ক আসছে ব্যবহার করতে চান (যেমন একটি মেনু লিংক নিচে স্ক্রল যে মত) একই পৃষ্ঠা অপরের থেকে পৃষ্ঠা ।

সুতরাং স্ক্র্যাচ থেকে www.mydomain.com/page.html#foo কল করা প্রদত্ত CSS সমাধানগুলি বা জেএস সমাধানগুলির সাথে বর্তমান ক্রোমে আপনার লক্ষ্যটি অফসেট করবে না ।

এছাড়াও একটি jQuery বাগ রিপোর্ট সমস্যার কিছু বিবরণ বর্ণনা করে describ

সমাধান

আমি এখন পর্যন্ত কেবলমাত্র বিকল্পটি খুঁজে পেয়েছি যা প্রকৃতপক্ষে ক্রোমে কাজ করে তা হল জাভাস্ক্রিপ্ট যা অন ডমরিডি বলা হয় না তবে দেরি করে।

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

সারসংক্ষেপ

কোনও জেএস বিলম্ব ছাড়াই সমাধানগুলি সম্ভবত ফায়ারফক্স, আইই, সাফারিতে কাজ করবে তবে Chrome এ নয়।

Comments

আমি একই সিদ্ধান্তে ও সমাধানে এসেছি। দেখে মনে হচ্ছে অন্য প্রতিটি শরীর হ্যাশট্যাগগুলি ব্যবহার করে এমন বাহ্যিক লিঙ্কগুলি ভুলে যাচ্ছে।

— এজেজে

আমার আজ সেই সমস্যা আছে এবং আমি আপনার সমাধানটি ব্যবহার করেছি। যদিও মনে হচ্ছে আপনার সময়সীমা দরকার নেই। এটি আইআইএফই হিসাবে কাজ করে।

— kwiat1990

@ কুয়েট ১৯৯৯: হ্যাঁ, এটি সম্ভব হতে পারে - তবে কেবল আপনার জেএসটি এইচটিএমএল কোডের একেবারে শেষে রাখে। অন্যথায় আপনার স্ক্রোল লক্ষ্য এখনও ডিওমে থাকতে পারে না। আসলে এটি ডমরিডি ব্যবহারের পুরো বিষয়টি। সুতরাং আমার ধারণা টাইমআউট সংস্করণটি স্থিতিশীল উপায়।

— জেপসি

এই উত্তরটি কেবলমাত্র বাহ্যিক লিঙ্কগুলির জন্য কাজ করেছিল। তবে লিঙ্কটি যখন একই পৃষ্ঠায় ডাকা হবে তখন তা আমার পক্ষে কার্যকর হয় না :( কোনও ধারণা?

— অগস্টো সামামি ব্যারিয়েন্টস ২

@ অগাস্টো আপনি কি সমাধান খুঁজে পেয়েছেন? আমারও একই সমস্যা হচ্ছে।

— জেসি

Answer 8

হিসাবে সিএসএস স্ক্রোল স্ন্যাপ বৈশিষ্ট খেলা আসে, এটি সহজে সম্ভব scroll-margin-topসম্পত্তি। বর্তমানে ক্রোম এবং অপেরা (এপ্রিল 2019) এ চলছে। এছাড়াও সাফারি ১১+ এর পক্ষে এটি সমর্থন করা উচিত, তবে আমি এটিকে সাফারি ১১-তে চালাতে পারিনি। সম্ভবত আমাদের এটির ওভারথারে ঠিক করার জন্য ছেলেদের অপেক্ষা করতে হবে।

কোডপেন উদাহরণ

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>

Comments

এটা বেশ মিষ্টি। আসুন আশা করি এটি আরও ব্যাপকভাবে গৃহীত হবে!

— তোমালাক

মধ্যে পার্থক্য কি 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=scrol-margin-top

— মু-সুন

@ মু-সুনসসাই এটি কিছুটা জটিল। এটি সাফারিতে আসলেই বিদ্যমান, তবে এটি স্ক্রোল থেকে টুকরোগুলি আচরণ করে না। ব্রাউজার- কম্পাট

— ডাকুর

Answer 9

ক্রোম / সাফারি / ফায়ারফক্সের জন্য আপনি display: blockঅফসেটটি ক্ষতিপূরণ দিতে একটি নেতিবাচক মার্জিন ব্যবহার করতে পারেন , যেমন:

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

উদাহরণ দেখুন http://codepen.io/sw/pen/RrZBJo

Answer 10

আপনি jQuery দিয়ে এটি করতে পারেন:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

Comments

".তারগেট" নয়, হওয়া উচিত ": টার্গেট"

— মের্ট এস কাপলান

@ MertS.Kaplan ".target" হল 'টার্গেট' শ্রেণি।

— ওয়েবভেটালি

Answer 11

সবেমাত্র আর একটি খাঁটি সিএসএস সমাধান আবিষ্কার করেছেন যা আমার জন্য আকর্ষণের মতো কাজ করেছিল!

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

এই সাইটে পাওয়া যায় !

Comments

অন্য কয়েকজন এই সমাধান আবিষ্কৃত হয়েছে আগে আপনি, পৃষ্ঠা 1 উত্তর, উদাহরণস্বরূপ দেখুন stackoverflow.com/a/56467997/18771

— Tomalak

দুঃখিত, খেয়াল করেনি! ধন্যবাদ!

— জামাওয়ে

এটি এজ এবং সাফারি ( bugs.webkit.org/show_bug.cgi?id=179379 ) এ পুরো পৃষ্ঠাটি স্ক্রোল করার জন্য কাজ করে না ।

— জুলিয়াসজ গোনেরা

Answer 12

আপনি এটি চেষ্টা করতে পারেন:

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

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

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

আপনার শিরোনামের প্রকৃত উচ্চতায় শীর্ষ প্যাডিং মান সেট করুন। এটি আপনার শিরোনামের শীর্ষে একটি সামান্য অতিরিক্ত ফাঁক উপস্থাপন করবে, তবে এটি কেবল তখনই দৃশ্যমান হবে যখন ব্যবহারকারী নোঙ্গরে লাফ দেয় এবং তারপরে স্ক্রোল করে। আমি এখনই আমার সাইটের জন্য সমাধানটি তৈরি করেছি তবে এটি কেবল পৃষ্ঠার শীর্ষে একটি ছোট ফিক্স বার দেখায়, খুব বেশি কিছু নেই nothing

Comments

এমএইচ। খারাপ নয়, তবে এখনও বেশ একটি হ্যাক (এবং IE তে কাজ করে না, দুঃখের সাথে)।

— তোমালাক

Answer 13

উপরে বর্ণিত "অ্যাঙ্কর: পূর্বে" পদ্ধতিটি ব্যবহার করে আমি এটি সিএসএস এবং এইচটিএমএল দিয়ে সহজেই কাজ করতে পেরেছি। আমি মনে করি এটি সবচেয়ে ভাল কাজ করে, কারণ এটি আপনার ডিভগুলির মধ্যে বিশাল প্যাডিং তৈরি করে না।

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

এটি পৃষ্ঠায় প্রথম ডিভের জন্য কাজ করছে বলে মনে হচ্ছে না, তবে আপনি প্রথম ডিভের মধ্যে প্যাডিং যুক্ত করে এটির বিরোধিতা করতে পারেন।

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

এখানে একটি কার্যক্ষম ফিডল: http://jsfiddle.net/FRpHE/24/

Answer 14

এটা আমার জন্য কাজ করে:

অ্যাঙ্করারে এইচটিএমএল লিঙ্ক:

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

এইচটিএমএল অ্যাঙ্কর:

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

সিএসএস:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

Answer 15

আমি @ জেপসির উত্তরটি ব্যবহার করছি, তবে কার্য সম্পাদনের কারণে আমি কেবলমাত্র টাইমার সেট করছি যদি হ্যাশটি ইউআরএলে উপস্থিত থাকে।

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

Comments

ওপি জাভাস্ক্রিপ্ট ব্যবহার না করতে বলেছে।

— জিউলিও ক্যাকসিন

বাহ্যিক লিঙ্কগুলির সাথে কাজ করে তবে পৃষ্ঠার লিঙ্কগুলির সাথে নয়।

— স্ন্যাপ করুন

Answer 16

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

আমি যা করতে পেরেছি তা কয়েকটি সমাধানের সংমিশ্রণ:

1. সিএসএস:

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

যেখানে "120px" আপনার স্থির শিরোনামের উচ্চতা (সম্ভবত কিছুটা মার্জিন) margin

2. বুকমার্ক লিঙ্ক এইচটিএমএল:

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

3. বুকমার্কযুক্ত সামগ্রী এইচটিএমএল:

   <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উপাদানটি কেবল লুকানো নয়, এটি মূলত ধসে পড়েছে এবং আপনার সামগ্রীতে প্যাড দেয় না।

আমি এই সমাধানটির জন্য অনেক ক্রেডিট নিতে পারি না কারণ এটি বিভিন্ন সংস্থানগুলির সোয়াজ থেকে আসে তবে এটি আমার ক্ষেত্রে আমার পক্ষে সবচেয়ে ভাল কাজ করেছে worked

আপনি এখানে প্রকৃত ফলাফল দেখতে পারেন ।

Comments

ভাগ করে নেওয়ার জন্য আপনাকে অনেক ধন্যবাদ! থ্রেড হিসাবে পুরানো, এখনও এই সমস্যার একমাত্র প্রাসঙ্গিক সমাধান বলে মনে হয় না।

— টমলাক

+ স্টিভ সিনক আপনি আমার মন পড়েছেন - আমি একই সমস্যার মুখোমুখি হয়েছি যেখানে ভাগ্য সমাধানগুলি পূর্বাভাস অনুযায়ী কাজ করছে না। মধ্যে যোগ করার পদ্ধতি <span>বিঘত মধ্যে নোঙ্গর সঙ্গে, প্যাডিং এবং মার্জিন আমার জন্য কাজ যোগ করেন। থ্রেডের বয়স থাকা সত্ত্বেও এই উত্তরটি জমা দেওয়ার জন্য সময় দেওয়ার জন্য অনেক ধন্যবাদ!

— twknab

Answer 17

উপরে তালিকাভুক্ত উত্তরটি নিয়ে আমার ভাগ্য ছিল না এবং এই সমাধানটি ব্যবহার করে শেষ হয়েছি যা নিখুঁতভাবে কাজ করেছে ...

যেখানে আপনি আপনার নোঙ্গর সেট করতে চান সেখানে একটি ফাঁকা স্প্যান তৈরি করুন।

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

বিভাগগুলিতে বিভিন্ন বর্ণের ব্যাকগ্রাউন্ড থাকলেও এই সমাধানটি কাজ করবে! আমি এই লিঙ্কে সমাধান খুঁজে পেয়েছি ।

Comments

এই থ্রেডে গুইলিউম লে মিয়ের এবং আরও কয়েকজন যে একই পদ্ধতি দেখিয়েছেন ঠিক সেই একই পদ্ধতিটি কি নয় ?

— টমলাক

এটি খুব অনুরূপ তবে আমি মনে করি এটি বোঝা সহজ এবং বাইরের উত্সের আরও গভীরতর লিঙ্কের সাথে আরও বিশদ প্রতিক্রিয়া।

— ম্যাট আন্ডারউড

এটি একই সমাধান, তবে আমি সহজেই এটি বুঝতে এবং অনুসরণ করতে পারি। অন্যরা আমাকে যথেষ্ট তথ্য দেয়নি।

— ম্যাক্রোম্যান

Answer 18

এটি আমার পিউরিস্ট মনের কাছে কিছুটা দুর্বল লাগছে তবে সিএসএস-একমাত্র সমাধান হিসাবে আপনি :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>

Comments

এটা মোটেও হ্যাকি নয়! সুন্দর সমাধান।

— তোমালাক

Answer 19

প্রথমটি ক্রোমে কাজ করেনি এবং দ্বিতীয়টি ফায়ারফক্সে কাজ না করায় আমাকে মিটেনএক্সডি এবং বাদবামের সিএসএস সমাধান দুটি একসাথেই ব্যবহার করতে হয়েছে বলে আমি জানতে পেরেছি :

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

Answer 20

আমি যেভাবে সবচেয়ে পরিষ্কার হিসাবে খুঁজে পাচ্ছি তা হল নিম্নলিখিতটি:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

Answer 21

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

লিঙ্কগুলিতে অ্যাঙ্কর-লিংক শ্রেণি বরাদ্দের মাধ্যমে, অন্যান্য লিঙ্কগুলির আচরণ (যেমন অ্যাকর্ডিয়ান বা ট্যাব নিয়ন্ত্রণগুলি) প্রভাবিত হয় না।

প্রশ্নটি জাভাস্ক্রিপ্ট চায় না তবে অন্য আরও জনপ্রিয় প্রশ্নটি এই কারণে বন্ধ হয়ে গেছে এবং আমি সেখানে উত্তর দিতে পারিনি।

Answer 22

আমার এমন কিছু দরকার ছিল যা ইনবাউন্ড লিঙ্ক, পৃষ্ঠার লিঙ্কগুলির জন্য কাজ করে এবং এটি জেএস দ্বারা লক্ষ্যবস্তু হতে পারে যাতে পৃষ্ঠাটি শিরোলেখের উচ্চতার পরিবর্তনের প্রতিক্রিয়া জানাতে পারে

এইচটিএমএল

<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 দ্বারা মন্তব্য, একটি টুকরা-লক্ষ্য উপরে 'প্যাডিং এলাকায়' থেকে লিঙ্কগুলি এখনো যোগ্য হতে পারবেন

আইই 11, এজ 15+, ক্রম 38+, এফএফ 52+, বা সাফারি 9.1+ এ আমি এখনও কোনও সমস্যা পাইনি

Answer 23

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

এই কোডটি কৌশলটি করা উচিত। আপনার শিরোনাম বারের উচ্চতার জন্য 45px অদলবদল করুন।

সম্পাদনা: jQuery ব্যবহার করা যদি একটি বিকল্প হয় তবে আমি অফসেট মান সেট সহ jQuery.localScrol ব্যবহার করেও সফল হয়েছি। অফসেট বিকল্পটি jQuery.scrollTo এর একটি অংশ, যা jQuery.localScrol এর উপর নির্মিত। একটি ডেমো এখানে উপলভ্য: http://demos.flesler.com/jquery/scrolTo/ ('অফসেট' এর অধীনে দ্বিতীয় উইন্ডো)

Comments

এই সমাধান প্রকৃতপক্ষে কাজ করে, কিন্তু এটি বুলেটপ্রুফ নয় এবং এটা ভিন্ন ব্রাউজার :( ভাল করে দেখুন thoug জন্য finetuning অনেক প্রয়োজন আমি অতিরিক্ত মার্কআপ ছাড়া একটি সমাধান অনুসন্ধানের জন্য

— Vlad saling

লজ্জাজনক বিষয়টি এত অগোছালো, এর অর্থ আপনি কেবল আইডি ব্যবহার করতে পারবেন না। একটি সমাধান খুঁজে পেতে চাই, আমি সব ধরণের জিনিস চেষ্টা করেছি।

— থিওরিজ

Answer 24

এখানে একটি সম্পূর্ণ jquery সমাধান যা আইই তে কাজ করবে:

ধরুন নেভিগেশন বারের উপাদানগুলি এই জাতীয় কিছু:

<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) {

    });
}

Comments

আমি থান্ডার থেকে এই কোডটির কিছুটা পরিবর্তিত সংস্করণ ব্যবহার করতে সক্ষম হয়েছি। আমি এই পৃষ্ঠাটি এবং উপর সিএসএস শুধুমাত্র এবং সহজ সমাধান অনেক চেষ্টা stackoverflow.com/questions/10732690/... এবং এর stackoverflow.com/questions/10732690/... কিন্তু তারা আমার প্রয়োজনীয়তার কারণে ব্যবহারযোগ্য ছিল না। পৃষ্ঠাগুলি একটি FAQ পৃষ্ঠা যা অনেকগুলি নোঙ্গরকে পৃষ্ঠার বাইরে এবং বাইরে উভয় স্থানে অবস্থান করতে পারে, তাই প্রচুর ফাঁকা দাগ থাকতে পারে। পরবর্তী মন্তব্যে অবিরত ....

— জেফ্রি সাইমন

এটি আমার পক্ষে কাজ করার জন্য, এখানে ছোটখাটো পরিবর্তনগুলি রয়েছে: (1) href.index লাইনে "<=" পরিবর্তন করুন অন-পৃষ্ঠা নেভিগেশনকে অনুমতি দেওয়ার জন্য; (২) আমার ব্যবহারের জন্য "# ফাখ এ" হওয়া "এ-নেভিগেশন" পরিবর্তন করুন; (3) মোবাইল বনাম ডেস্কটপের পার্থক্যের জন্য উইন্ডো। (4) অ্যানিমেটে 400 টি পরিবর্তন করে 1 এ দিন, কারণ অ্যানিমেশনটি পছন্দসই নয় এবং 0 কাজ করে না; (5) যোগ করুন যদি ($ ('আমার পৃষ্ঠা-নির্বাচক')। অজ্ঞাতনামা ফাংশনটিতে অফসেটস্ক্রোলফ্রোম থেকে লোকেশন প্রয়োজন নেই যেখানে পৃষ্ঠাগুলিতে অপ্রয়োজনীয় কলগুলি রোধ করতে হবে

— জেফ্রি সাইমন

Answer 25

কার্যকর না হয়ে কার্যকরভাবে প্রয়োগ করা হয়েছে :beforeযতক্ষণ না আমরা বুঝতে পারলাম যে ছদ্ম উপাদানটি সিউডো এলিমেন্টের ক্ষেত্রের মধ্যে থাকা পয়েন্টার ইভেন্টগুলিকে আচ্ছাদন করে বাধা দিচ্ছে । ভালো কিছু ব্যবহার pointer-events: noneউপর :beforeবা এমনকি সরাসরি নোঙ্গর কোন প্রভাবিত করেছিল।

আমরা যা করতে পেরেছি তা হ'ল অ্যাঙ্কারের পজিশনিংকে পরম করে তোলা এবং তারপরে স্থির ক্ষেত্রের অফসেট / উচ্চতা হিসাবে এর অবস্থানটি সামঞ্জস্য করা।

পয়েন্টার ইভেন্টগুলি অবরুদ্ধ না করে অ্যাঙ্কসেটটিকে অফসেট করুন

.section-marker {

    position: absolute;
    top: -300px;
}

এর সাথে মানটি হ'ল আমরা এমন কোনও উপাদানকে ব্লক করছি না যা এই 300px এর মধ্যে পড়তে পারে। নেতিবাচক দিকটি হ'ল জাভাস্ক্রিপ্ট থেকে সেই উপাদানটির অবস্থানটি ধরে নেওয়া সেই অ্যাকাউন্টটিকে বিবেচনায় নেওয়া উচিত যাতে কোনও যুক্তি সামঞ্জস্য করতে হয়েছিল।

Answer 26

আপনি যখন নেভিগেশনে ক্লিক করেন তখন অবশেষে যথাযথ স্থানে যেতে পেলাম। আমি নেভিগেশন ক্লিকের জন্য একটি ইভেন্ট হ্যান্ডলার যুক্ত করেছি। তারপরে আপনি অফসেটে সরাতে কেবল "স্ক্রোলবাই" ব্যবহার করতে পারেন।

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });

Comments

সমস্যার সমাধান করে তবে "জাভাস্ক্রিপ্টের সাহায্য ছাড়াই" অংশটি নয় ...

— তোমালাক

Answer 27

আমি কয়েকটি লাইন বিরতি দিয়ে একটি ডিভি তৈরি করেছি এবং সেই আইডি দিয়েছিলাম, আমি তখন কোডটি নীচে প্রদর্শন করতে চাই put লিঙ্কটি তারপরে আপনাকে চিত্রের উপরের স্পেসে নিয়ে যাবে এবং শিরোনামটি আর চলবে না:

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

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

Comments

বাস্তববাদী, তবে একটি খারাপ দিক রয়েছে - এটি কেবল কোনও পৃষ্ঠায় প্রথম শিরোনামের জন্য কাজ করে। যদি আরও শিরোনাম থাকে <br>তবে প্রতিটি শিরোনামের আগে ট্যাগগুলির কারণে আপনি পাঠ্যে বড় ফাঁক দেখতে শুরু করবেন ।

— টমলক

Answer 28

এই স্ক্রিপ্ট ব্যবহার করা হয়েছে

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

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

Comments

আপনি কেন এই স্ক্রিপ্টটি সমস্যার সমাধান করবেন বলে মনে করেন দয়া করে তা

— বোঝানোর

Answer 29

আমি মনে করি এই পদ্ধতিটি আরও কার্যকর:

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

Answer 30

আপনি এখন স্ক্রোল-মার্জিন-শীর্ষ ব্যবহার করতে পারেন , যা বেশ ব্যাপকভাবে গৃহীত ।

আপনি যে উপাদানটিতে স্ক্রোল করতে চান তাতে কেবল নিম্নলিখিত সিএসএস যুক্ত করুন:

.element {
  scroll-margin-top: 2em;
}

Comments

scroll-margin-topএই থ্রেডের আগে

— টমলাক