it-swarm.asia

اجعل رابط الربط ينتقل إلى أعلى بكسل حيث يرتبط به

لست متأكدًا من أفضل طريقة لطرح/البحث عن هذا السؤال:

عندما تنقر على رابط الربط ، فإنها تنقلك إلى هذا القسم من الصفحة مع المنطقة المرتبطة الآن في أعلى الصفحة من الصفحة. أرغب في إرسال رابط الربط إلى هذا الجزء من الصفحة ، لكن أود الحصول على مساحة في الجزء العلوي. كما في ، لا أريد أن يرسلني إلى الجزء المرتبط به في VERY TOP ، أود الحصول على 100 بكسل أو أكثر من المساحة هناك.

هل لهذا معنى؟ هل هذا ممكن؟

تم التعديل لإظهار الشفرة - إنها مجرد علامة ربط:

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

<p id="anchor">I should be 100px below where I currently am!</p>
94
damon
window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

سيتيح هذا للمتصفح القيام بعمل القفز إلى المرساة بالنسبة لنا ومن ثم سنستخدم هذا الموضع للتعويض عنه.

تحرير 1:

كما أشارerb ، هذا يعمل فقط إذا كنت على الصفحة أثناء تغيير التجزئة. لا يعمل إدخال الصفحة برمز #something الموجود بالفعل في عنوان URL مع الرمز أعلاه. إليك إصدار آخر للتعامل مع ذلك:

// 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 في الأمثلة. ThanksNeon.

EDIT 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 لهذا المثال هو هنا

121
Eric Olson

باستخدام css فقط ، يمكنك إضافة حشوة للعنصر المرتبط (كما في الحل أعلاه) لتجنب المسافات البيضاء غير الضرورية ، يمكنك إضافة هامش سلبي بنفس الارتفاع:

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

لست متأكدًا مما إذا كان هذا هو أفضل حل في أي حال ، لكنه جيد بالنسبة لي.

71
user3364768

حل أفضل:

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

ما عليك سوى وضع علامة <a> مع تحديد موضع مطلق داخل كائن محدد نسبياً.

يعمل عند دخول الصفحة أو من خلال تغيير التجزئة داخل الصفحة.

51
Thomas

أفضل حل

<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>
16
Никита Андрейчук

سيعمل هذا بدون مسج وتحميل الصفحة.

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

للارتباط بعنصر ، ثم "وضع" ذلك العنصر على مسافة تعسفية من أعلى الصفحة ، باستخدام 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>

CSS:

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

JS Fiddle العرض التوضيحي .

لاستخدام نهج JavaScript عادي:

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

window.addEventListener('hashchange', addMargin);

JS Fiddle العرض التوضيحي .

4
David Thomas

إجابة إريك رائعة ، لكنك لا تحتاج حقًا إلى هذه المهلة. إذا كنت تستخدم 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();
});

هذا أيضا يخلصنا من هذا العامل التعسفي.

3
rppc

هذا يجب أن يعمل:

    $(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 إلى ما يتناسب مع رابط الربط الخاص بك.

3
dMehta

إذا كنت تستخدم أسماء مرساة صريحة مثل ،

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

ثم في المغلق يمكنك ببساطة تعيين

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

سيعمل هذا طالما أن علامات ربط HREF الخاصة بك لا تحدد أيضًا سمة NAME

3
Mespr

جرب هذا الرمز ، إنه يحتوي بالفعل على رسوم متحركة سلسة عند النقر فوق الارتباط.

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

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

متغير من حل Thomas: CSS element> element محددات يمكن أن يكون مفيدًا هنا:

CSS

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

HTML

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

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

نقرة على الرابط سوف تنقل موضع التمرير إلى 100px أعلاه أينما تم وضع العنصر مع فئة paddedAnchor.

مدعوم في متصفحات غير IE وفي IE من الإصدار 9. للدعم في IE 7 و 8 ، يجب الإعلان عن رمز <!DOCTYPE>.

1
HondaGuy

لقد وجدت حلاً سهلاً لنفسي. كان هامش أعلى من 15px

HTML

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

CSS

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

الحل الأسهل:

CSS

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

HTML

<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>
1
Edalat Mojaveri

أنا فقط لدي نفس المشكلة. لدي nav افترضت pixed وأريد أن تبدأ أنغكور تحت nav. لا يعمل حل window.addEventListener... بالنسبة لي لأنني قمت بتعيين صفحتي على أن تكون scroll-behavior:smooth لذا فقد قمت بتعيين الإزاحة بدلاً من ذلك قم بالتمرير إلى angkor. يعمل setTimeout() إذا كان الوقت كافيا للتمرير إلى النهاية ، لكنه لا يزال غير جيد. لذلك كان حلي هو إضافة div مطلقة مفترضة في angkor ، مع height:[the height of the nav] و bottom:100%. في هذه الحالة ، انتهى هذا div بأعلى عنصر angkor ، وابدأ من الموضع الذي تنتقل إليه the angor. الآن كل ما أقوم به هو تعيين رابط angkor لهذا 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>
0
Yosef Tukachinsky

أعرف أن هذا متأخر جدًا ، لكنني وجدت شيئًا مهمًا للغاية لوضعه في الكود إذا كنت تستخدم Scrollspy الخاص بـ Bootstrap. ( http://getbootstrap.com/javascript/#scrollspy )

كان هذا يقودني إلى المكسرات لساعات.

إزاحة تجسس التمرير يجب أن يتطابق مع window.scrollY وإلا فإنك ستتعرض لخطر:

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

بناءً علىEric Olson solution فقط قم بتعديل قليلاً لتضمين عنصر الربط الذي أريد أن أذهب إليه بالتحديد

// 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);
});
0
Carlos A. Ortiz

كنت أواجه مشكلة مماثلة وحلت باستخدام الرمز التالي

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