it-swarm.dev

روابط مرساة ملساء بدون مسج

هل من الممكن استخدام التمرير السلس لربط الروابط ولكن بدونjQuery؟ أقوم بإنشاء موقع جديد ولا أريد استخدام jQuery.

48
drozdzynski

باستخدام الوظيفة من هنا: JavaScript animation وتعديلها لتعديل خاصية (ليس فقط خاصية نمط) ، يمكنك تجربة شيء مثل هذا:

function animate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from))+unit;
            } else {
                elem.style[style] = (from + step * (to - from))+unit;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, 25);
    if (prop) {
          elem[style] = from+unit;
    } else {
          elem.style[style] = from+unit;
    }
}

window.onload = function () {
    var target = document.getElementById("div5");
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

العرض التجريبي: https://jsfiddle.net/zpu16nen/

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

ولا ، لم يتطلب الأمر إعادة الترفيه بنسبة 25 ٪ من مسج.

من الواضح أن هذا قد تم تعديله بشكل كبير وفقًا لما يعنيه سؤالك بالفعل (مثل عندما يتغير إطار النافذة أو شيء من هذا القبيل).

لاحظ أنه مع jQuery ، يكون الأمر سهلاً كما يلي:

$(document).ready(function () {
    $("html, body").animate({
        scrollTop: $("#div5").offset().top
    }, 2000);
});

العرض التجريبي: http://jsfiddle.net/7TAa2/1/

فقط أقول...

40
Ian

تمديد هذه الإجابة: https://stackoverflow.com/a/8918062/3851798

بعد تحديد وظيفة scrollTo الخاصة بك ، يمكنك تمرير العنصر الذي تريد تمريره في الوظيفة.

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 10;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

إذا كان لديك div مع معرف = "تذييل"

<div id="footer" class="categories">…</div>

في البرنامج النصي الذي تقوم بتشغيله للتمرير ، يمكنك تشغيل هذا ،

elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);

وهناك لديك. التمرير السلس دون مسج. يمكنك فعليًا استخدام ذلك الكود على وحدة التحكم في المستعرض لديك وضبطه حسب رغبتك.

51
Tejas Shah

في الواقع ، هناك طريقة أكثر بسيطة وخفيفة الوزن للقيام بذلك: https://codepen.io/ugg0t/pen/mqBBBY

function scrollTo(element) {
  window.scroll({
    behavior: 'smooth',
    left: 0,
    top: element.offsetTop
  });
}

document.getElementById("button").addEventListener('click', () => {
  scrollTo(document.getElementById("8"));
});
div {
  width: 100%;
  height: 200px;
  background-color: black;
}

div:nth-child(odd) {
  background-color: white;
}

button {
  position: absolute;
  left: 10px;
  top: 10px;
}
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button id="button">Button</button>
24
Alexander Svetly

استخدم هذا:

let element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

[~ # ~] عرض توضيحي [~ # ~] : https://jsfiddle.net/anderpo/x8ucc5ak/1/ =

5
Anderpo

انتقالات CSS3 مع :target محدد يمكن أن يعطي نتيجة لطيفة دون أي اختراق JS. كنت أفكر فقط فيما إذا كنت سأقوم بتقليد هذا الأمر ، لكن من دون Jquery فإن الأمر يصبح فوضويًا بعض الشيء. انظر هذا السؤال للحصول على التفاصيل.

4
Louis Maddox

يستخدم برنامج Vanilla js variant باستخدام requestAnimationFrame مع عمليات الارتفاق وجميع المتصفحات المدعومة:

const requestAnimationFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;

function scrollTo(to) {
    const start = window.scrollY || window.pageYOffset
    const time = Date.now()
    const duration = Math.abs(start - to) / 3;

    (function step() {
        var dx = Math.min(1, (Date.now() - time) / duration)
        var pos = start + (to - start) * easeOutQuart(dx)

        window.scrollTo(0, pos)

        if (dx < 1) {
            requestAnimationFrame(step)
        }
    })()
}

أي تخفيف معتمد!

3
Oleksandr Kozlov

مكتبة جافا سكريبت خفيفة الوزن: التمرير السلس على جيثب

2
Jeremy Lynch

مكتبة التمرير إلى المفضلة حاليًا هي Zenscroll بسبب مجموعة واسعة من الميزات وصغر حجمها (3.17 كيلو بايت فقط حاليًا).

في المستقبل قد يكون من المنطقي استخدام الوظيفة الأصلية scrollIntoView ، ولكن نظرًا لأنه يجب أن يتم ملء الملف في معظم مواقع الإنتاج اليوم نظرًا لعدم وجود IE الدعم ، أوصي باستخدام Zenscroll بدلاً من ذلك في جميع الحالات.

1
Zach Saucier

جرب هذا الكود هنا:

window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
    });
1
Alberto Junior

التمرير السلس للسلوك باستخدام polyfill ...

مثال:

document.querySelectorAll('a[href^="#"]').addEventListener("click", function(event) {
  event.preventDefault();
  document.querySelector(this.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
});

المستودع: https://github.com/iamdustan/smoothscroll

1
MNF

انها نسخة مطورة منIan

// Animated scroll with pure JS
// duration constant in ms
const animationDuration = 600;
// scrollable layout
const layout = document.querySelector('main');
const fps = 12;  // in ms per scroll step, less value - smoother animation
function scrollAnimate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            var value =  (from + step * (to - from)) + unit;
            if (prop) {
                elem[style] = value;
            } else {
                elem.style[style] = value;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, fps);
    if (prop) {
        elem[style] = from + unit;
    } else {
        elem.style[style] = from + unit;
    }
}

function scrollTo(hash) {
    const target = document.getElementById(hash);
    const from = window.location.hash.substring(1) || 'start';
    const offsetFrom = document.getElementById(from).offsetTop;
    const offsetTo = target.offsetTop;
    scrollAnimate(layout,
        "scrollTop", "", offsetFrom, offsetTo, animationDuration, true);
    setTimeout(function () {
      window.location.hash = hash;
    }, animationDuration+25)
};

// add scroll when click on menu items 
var menu_items = document.querySelectorAll('a.mdl-navigation__link');
menu_items.forEach(function (elem) {
    elem.addEventListener("click",
        function (e) {
            e.preventDefault();
            scrollTo(elem.getAttribute('href').substring(1));
        });
});

// scroll when open link with anchor 
window.onload = function () {
    if (window.location.hash) {
        var target = document.getElementById(window.location.hash.substring(1));
        scrollAnimate(layout, "scrollTop", "", 0, target.offsetTop, animationDuration, true);
    }
}
0
Yevhenii Dehtiar

لأي شخص في عام 2019 ، أولاً ، يمكنك إضافة مستمع حدث

  document.getElementById('id').addEventListener('click', () => scrollTo())

ثم تستهدف العنصر وتذهب إليه بسلاسة

function scrollTo() {
    let target = document.getElementById('target');
    target.scrollIntoView({
        behavior: "smooth", 
        block: "end", 
        inline: "nearest"
    })
}
0
François PIQUARD

هنا حل بسيط في جافا سكريبت خالص . يستفيد من خاصية CSS - سلوك التمرير: smooth

function scroll_to(id) {       
    document.documentElement.style.scrollBehavior = 'smooth'
    element = document.createElement('a');
    element.setAttribute('href', id)
    element.click();
}

استخدام :

قل لدينا 10 divs:

<div id='df7ds89' class='my_div'>ONE</div>
<div id='sdofo8f' class='my_div'>TWO</div>
<div id='34kj434' class='my_div'>THREE</div>
<div id='gbgfh98' class='my_div'>FOUR</div>
<div id='df89sdd' class='my_div'>FIVE</div>
<div id='34l3j3r' class='my_div'>SIX</div>
<div id='56j5453' class='my_div'>SEVEN</div>
<div id='75j6h4r' class='my_div'>EIGHT</div>
<div id='657kh54' class='my_div'>NINE</div>
<div id='43kjhjh' class='my_div'>TEN</div>

يمكننا التمرير إلى المعرف المفضل :

scroll_to('#657kh54')

يمكنك ببساطة استدعاء هذه الوظيفة في حدث النقر الخاص بك (على سبيل المثال ، انقر فوق زر ثم انتقل إلى div # 9).

نتيجة :

enter image description here

بالطبع يبدو أكثر سلاسة في الحياة الحقيقية.

كمان

لسوء الحظ ، IE ولا ​​يدعم Safari scrollBehavior = "أملس" اعتبارًا من 2019

enter image description hereMDN Web Docs

0
Cybernetic