javascript - JQuery के बिना चिकनी स्क्रॉल एंकर लिंक




hyperlink anchor (8)

CSS3 संक्रमण :target चयनकर्ता बिना किसी जेएस हैकिंग के एक अच्छा परिणाम दे सकता है। मैं सिर्फ इस बात पर विचार कर रहा था कि क्या इसे लागू किया जाए लेकिन जेकरी के बिना यह थोड़ा गड़बड़ हो जाता है। विवरण के लिए यह प्रश्न देखें।

क्या एंकर लिंक के बिना, लेकिन jQuery बिना चिकनी स्क्रॉल का उपयोग करना संभव है? मैं एक नई साइट बना रहा हूं और मैं jQuery का उपयोग नहीं करना चाहता।


आप इस जावास्क्रिप्ट लाइब्रेरी का उपयोग अपने सभी आंतरिक लिंक्स पर चिकनी स्क्रॉलिंग जोड़ने के लिए कर सकते हैं। आप अनदेखा करने के लिए लिंक प्रदान करने के लिए कॉन्फ़िगरेशन भी जोड़ सकते हैं। आप यहाँ एक विस्तृत नज़र रख सकते हैं। https://codingninjascodes.github.io/SmoothScrollJs/


इसे इस्तेमाल करो:

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/


पॉलीफ़िल के साथ चिकना स्क्रॉल व्यवहार ...

उदाहरण:

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

रिपोजिटरी: github.com/iamdustan/smoothscroll


यह @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);
    }
}

यहाँ शुद्ध जावास्क्रिप्ट में एक सरल समाधान है। यह सीएसएस संपत्ति स्क्रॉल-व्यवहार का लाभ उठाता है: चिकनी

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 पर स्क्रॉल करें) पर कॉल करते हैं

परिणाम :

निश्चित रूप से यह वास्तविक जीवन में बहुत चिकनी लगती है।

FIDDLE

दुर्भाग्य से, IE और Safari 2019 के अनुसार स्क्रॉलबेहोर = 'चिकनी' का समर्थन नहीं करते हैं

एमडीएन वेब डॉक्स


वास्तव में, ऐसा करने के लिए अधिक हल्का और सरल तरीका है: 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>


वेनिला जेएस संस्करण का उपयोग करके requestAnimationFrame और सभी ब्राउज़रों के साथ 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)
        }
    })()
}

किसी भी easing समर्थित!







anchor