HTML: جعل الرصاص تصل إلى مرساة تركزت في منتصف الصفحة

Question

ولدي ارتباط إلى مرساة على صفحة HTML بلدي. عند النقر على الرابط يتسبب الصفحة للانتقال إلى مرساة بحيث مرساة هو في أعلى جدا من الجزء المرئي من الصفحة. كيف يمكنني جعل التمرير الصفحة بحيث مرساة سيكون في منتصف الصفحة؟

Answer 1

وليس هناك طريقة مباشرة للقيام بذلك في الخالص أتش تي أم أل \ المغلق. على الرغم من أنه من الممكن استخدام شبيبة، عن طريق الحصول على موقع العنصر العلوي وتحديد موقف للصفحة كبار نصف موقف ناقص هذا العنصر من ارتفاع الصفحة.

Answer 2

ولقد وجدت الحل مرساة سريعة مع أي الثابتة رأس أرسلت بواسطة فيليب، وقال انه مصمم على شبكة الإنترنت. وأضاف فيليب فترة جديدة فارغة لأن الموقف مرساة.

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

شكرا، فيليب!

Answer 3

وأتش تي أم أل:

<a id="anchor">NEWS</a>

والمغلق:

#anchor{
position: relative;
padding-top: 100px; //(whatever distance from the top of the page you want)
}

وعملت بشكل جيد بالنسبة لي

Answer 4

ووضع <span class="anchor" id="X"> ثم أسلوب الطبقة anchor مثل:

.anchor {
  position: absolute;
  transform: translateY(-50vh);
}

-50vh مرساة سوف انتقل في منتصف الشاشة.

Answer 5

وإذا كنت تريد دون مساحة فارغة القيام بذلك مثل هذا:

و<h2 id="jump_tag" style="padding-top: 500pt; margin-top: -500pt;"></h2>

ولكن، عليك لا تزال بحاجة الى تنظيم الارتفاع من جافا سكريبت

Answer 6

وتحديد أي جزء من صفحتك كنت فعلا تريد في الجزء العلوي، ووضع مرساة هناك بدلا من ذلك. أنت لن تكون قادرة على تغيير الطريقة التي المتصفحات تفسير المراسي - على الأقل ليس من دون إزعاج للمستخدمين

Answer 7

ومنذ "منتصف الصفحة" نسبة إلى حجم شاشة المستخدم ونافذة في أي وقت من الأوقات، وأنت تسير لدينا لاستخدام جافا سكريبت لتحقيق ذلك، كما لا توجد وسيلة في HTML نقية / CSS للحصول على عرض الشاشة الرأسي.

Answer 8

وتوسيع الخروج من charles.cc.hsu في الإجابة ، يمكننا أن نفعل هذا لعناصر من ارتفاع التعسفي باستخدام CSS vh وحدة، وهو نسبة إلى ارتفاع إطار العرض و.

وHTML:

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

وCSS:

.anchor{
    display: block;
    height: 50vh; /* 50% viewport height */
    margin-top: -50vh;
    visibility: hidden;
}

ويتم دعم vh في في IE9 وحتى، لذلك فمن آمن جدا للاستخدام.

Answer 9

وسوف أحاول وضع هامش السلبي (أو غيرها من طريقة لتحديد المواقع) يساوي نصف ارتفاع الصفحة على علامة مرساة الهدف.

Answer 10

وفايرفوكس يدعم تعيين خاصية الحشو أعلى على مرساة اسمه. من هناك، هل يمكن تعيين ملف تعريف ارتباط عبر جافا سكريبت يحتوي على أبعاد المتصفح، وضبط الخاص الحشو أعلى وفقا لذلك من جانب الخادم. إلى المستخدم النهائي، فإنه تبدو حالته النقية أتش تي أم أل / المغلق، ولكن نعوم هو الصحيح في أن هناك حاجة إلى وقت مبكر قليلا من JS للحصول على أبعاد المتصفح، لأنه لا يوفر لك هذه المعلومات دون القليل من الإكراه.