मैं एक पृष्ठ का कोडिंग कर रहा हूं जहां मैं केवल प्लगइन्स या फ्रेमवर्क के हस्तक्षेप के बिना यूआई के लिए कच्चे जावास्क्रिप्ट कोड का उपयोग करना चाहता हूं।
और अब मैं jQuery के बिना पृष्ठ पर आसानी से स्क्रॉल करने का एक तरीका खोजने के साथ संघर्ष कर रहा हूं।
जवाबों:
इस चिकने स्क्रॉलिंग डेमो या एल्गोरिथ्म को आज़माएँ :
self.pageYOffsetelement.offsetTopwindow.scrollToइस प्रश्न का अन्य लोकप्रिय उत्तर भी देखें ।
एंड्रयू जॉनसन का मूल कोड:
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if (self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6 - standards mode
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
function smoothScroll(eID) {
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
if (speed >= 20) speed = 20;
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
}
सम्बंधित लिंक्स:
जावास्क्रिप्ट में मूल ब्राउज़र सुगम स्क्रॉल इस तरह है:
// scroll to specific values,
// same as window.scroll() method.
// for scrolling a particular distance, use window.scrollBy().
window.scroll({
top: 2500,
left: 0,
behavior: 'smooth'
});
// scroll certain amounts from current position
window.scrollBy({
top: 100, // negative value acceptable
left: 0,
behavior: 'smooth'
});
// scroll to a certain element
document.querySelector('.hello').scrollIntoView({
behavior: 'smooth'
});
speedविकल्प की आवश्यकता है । वर्तमान स्क्रॉलिंग गति प्रवाह के लिए बहुत धीमी है।
संपादित करें: यह उत्तर 2013 में लिखा गया है। अनुरोध के बारे में नीचे क्रिस्टियान ट्रेना की टिप्पणी देखें
मैने कर दिखाया। नीचे दिया गया कोड किसी भी ढांचे पर निर्भर नहीं करता है।
सीमा: एंकर सक्रिय एरल में नहीं लिखा है।
कोड का संस्करण: 1.0 | गिथब: https://github.com/Yappli/smooth-scroll
(function() // Code in a function to create an isolate scope
{
var speed = 500;
var moving_frequency = 15; // Affects performance !
var links = document.getElementsByTagName('a');
var href;
for(var i=0; i<links.length; i++)
{
href = (links[i].attributes.href === undefined) ? null : links[i].attributes.href.nodeValue.toString();
if(href !== null && href.length > 1 && href.substr(0, 1) == '#')
{
links[i].onclick = function()
{
var element;
var href = this.attributes.href.nodeValue.toString();
if(element = document.getElementById(href.substr(1)))
{
var hop_count = speed/moving_frequency
var getScrollTopDocumentAtBegin = getScrollTopDocument();
var gap = (getScrollTopElement(element) - getScrollTopDocumentAtBegin) / hop_count;
for(var i = 1; i <= hop_count; i++)
{
(function()
{
var hop_top_position = gap*i;
setTimeout(function(){ window.scrollTo(0, hop_top_position + getScrollTopDocumentAtBegin); }, moving_frequency*i);
})();
}
}
return false;
};
}
}
var getScrollTopElement = function (e)
{
var top = 0;
while (e.offsetParent != undefined && e.offsetParent != null)
{
top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
e = e.offsetParent;
}
return top;
};
var getScrollTopDocument = function()
{
return document.documentElement.scrollTop + document.body.scrollTop;
};
})();
var _updateURL = function ( anchor, url ) { if ( (url === true || url === 'true') && history.pushState ) { history.pushState( {pos:anchor.id}, '', anchor ); } };( जैसे क्रिस फर्नांडी के स्मूथ स्क्रोल js ) URL से एंकर लिखने के लिए धक्का देंगे । सिर्फ "JQuery का उपयोग करें" के बजाय लोगों को ऐसा करते हुए देखकर अच्छा लगा! रिकॉर्ड के लिए, :targetचयनकर्ता भी एक साफ समाधान हैं।
किसी तत्व को स्क्रॉल scrollTopकरने के लिए समय के साथ उसके मूल्य को बदलना पड़ता है । किसी दिए गए बिंदु के लिए, एक नए scrollTopमान की गणना करें । सुचारू रूप से चेतन करने के लिए, एक चिकनी-चरण एल्गोरिथ्म का उपयोग करके प्रक्षेपित करें ।
scrollTopनिम्नानुसार गणना करें :
var point = smooth_step(start_time, end_time, now);
var scrollTop = Math.round(start_top + (distance * point));
कहाँ पे:
start_time एनीमेशन शुरू होने का समय है;end_timeजब एनीमेशन समाप्त हो जाएगा (start_time + duration);start_topscrollTopशुरुआत में मूल्य है; तथाdistanceवांछित अंतिम मान और प्रारंभ मान के बीच का अंतर है (target - start_top)।एक मजबूत समाधान का पता लगाना चाहिए जब एनिमेशन बाधित होता है, और अधिक। विवरण के लिए jQuery के बिना चिकनी स्क्रॉलिंग के बारे में मेरी पोस्ट पढ़ें ।
JSFiddle देखें ।
कोड:
/**
Smoothly scroll element to the given target (element.scrollTop)
for the given duration
Returns a promise that's fulfilled when done, or rejected if
interrupted
*/
var smooth_scroll_to = function(element, target, duration) {
target = Math.round(target);
duration = Math.round(duration);
if (duration < 0) {
return Promise.reject("bad duration");
}
if (duration === 0) {
element.scrollTop = target;
return Promise.resolve();
}
var start_time = Date.now();
var end_time = start_time + duration;
var start_top = element.scrollTop;
var distance = target - start_top;
// based on http://en.wikipedia.org/wiki/Smoothstep
var smooth_step = function(start, end, point) {
if(point <= start) { return 0; }
if(point >= end) { return 1; }
var x = (point - start) / (end - start); // interpolation
return x*x*(3 - 2*x);
}
return new Promise(function(resolve, reject) {
// This is to keep track of where the element's scrollTop is
// supposed to be, based on what we're doing
var previous_top = element.scrollTop;
// This is like a think function from a game loop
var scroll_frame = function() {
if(element.scrollTop != previous_top) {
reject("interrupted");
return;
}
// set the scrollTop for this frame
var now = Date.now();
var point = smooth_step(start_time, end_time, now);
var frameTop = Math.round(start_top + (distance * point));
element.scrollTop = frameTop;
// check if we're done!
if(now >= end_time) {
resolve();
return;
}
// If we were supposed to scroll but didn't, then we
// probably hit the limit, so consider it done; not
// interrupted.
if(element.scrollTop === previous_top
&& element.scrollTop !== frameTop) {
resolve();
return;
}
previous_top = element.scrollTop;
// schedule next frame for execution
setTimeout(scroll_frame, 0);
}
// boostrap the animation process
setTimeout(scroll_frame, 0);
});
}
pageYOffsetऔर का उपयोग करने के लिए किया था । scrollTo()elementscrollTop
मैंने यहां jQuery के बिना एक उदाहरण बनाया है: http://codepen.io/sorinnn/pen/ovzdq
/**
by Nemes Ioan Sorin - not an jQuery big fan
therefore this script is for those who love the old clean coding style
@id = the id of the element who need to bring into view
Note : this demo scrolls about 12.700 pixels from Link1 to Link3
*/
(function()
{
window.setTimeout = window.setTimeout; //
})();
var smoothScr = {
iterr : 30, // set timeout miliseconds ..decreased with 1ms for each iteration
tm : null, //timeout local variable
stopShow: function()
{
clearTimeout(this.tm); // stopp the timeout
this.iterr = 30; // reset milisec iterator to original value
},
getRealTop : function (el) // helper function instead of jQuery
{
var elm = el;
var realTop = 0;
do
{
realTop += elm.offsetTop;
elm = elm.offsetParent;
}
while(elm);
return realTop;
},
getPageScroll : function() // helper function instead of jQuery
{
var pgYoff = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
return pgYoff;
},
anim : function (id) // the main func
{
this.stopShow(); // for click on another button or link
var eOff, pOff, tOff, scrVal, pos, dir, step;
eOff = document.getElementById(id).offsetTop; // element offsetTop
tOff = this.getRealTop(document.getElementById(id).parentNode); // terminus point
pOff = this.getPageScroll(); // page offsetTop
if (pOff === null || isNaN(pOff) || pOff === 'undefined') pOff = 0;
scrVal = eOff - pOff; // actual scroll value;
if (scrVal > tOff)
{
pos = (eOff - tOff - pOff);
dir = 1;
}
if (scrVal < tOff)
{
pos = (pOff + tOff) - eOff;
dir = -1;
}
if(scrVal !== tOff)
{
step = ~~((pos / 4) +1) * dir;
if(this.iterr > 1) this.iterr -= 1;
else this.itter = 0; // decrease the timeout timer value but not below 0
window.scrollBy(0, step);
this.tm = window.setTimeout(function()
{
smoothScr.anim(id);
}, this.iterr);
}
if(scrVal === tOff)
{
this.stopShow(); // reset function values
return;
}
}
}
window.setTimeout = window.setTimeout;
आधुनिक ब्राउज़रों के पास CSS "स्क्रॉल-व्यवहार: चिकनी" संपत्ति के लिए समर्थन है। तो, हमें इसके लिए किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है। बस इसे बॉडी एलिमेंट में जोड़ें, और सामान्य एंकर और लिंक का उपयोग करें। स्क्रॉल-व्यवहार MDN डॉक्स
मैंने हाल ही में इस समस्या को हल करने के लिए एक ऐसी स्थिति में सेट किया था जहाँ jQuery एक विकल्प नहीं था, इसलिए मैं यहाँ अपना समाधान सिर्फ पोस्टरिटी के लिए कर रहा हूँ।
var scroll = (function() {
var elementPosition = function(a) {
return function() {
return a.getBoundingClientRect().top;
};
};
var scrolling = function( elementID ) {
var el = document.getElementById( elementID ),
elPos = elementPosition( el ),
duration = 400,
increment = Math.round( Math.abs( elPos() )/40 ),
time = Math.round( duration/increment ),
prev = 0,
E;
function scroller() {
E = elPos();
if (E === prev) {
return;
} else {
prev = E;
}
increment = (E > -20 && E < 20) ? ((E > - 5 && E < 5) ? 1 : 5) : increment;
if (E > 1 || E < -1) {
if (E < 0) {
window.scrollBy( 0,-increment );
} else {
window.scrollBy( 0,increment );
}
setTimeout(scroller, time);
} else {
el.scrollTo( 0,0 );
}
}
scroller();
};
return {
To: scrolling
}
})();
/* usage */
scroll.To('elementID');
scroll()फ़ंक्शन का उपयोग करता खुलासा मॉड्यूल पैटर्न इसके लिए लक्ष्य तत्व की आईडी पारित करने के लिए scrolling()के माध्यम से, समारोह scroll.To('id'), जिसके द्वारा इस्तेमाल किया मूल्यों सेट scroller()समारोह।
टूट - फूट
इन scrolling():
el : लक्ष्य DOM ऑब्जेक्टelPos: एक फ़ंक्शन elememtPosition()देता है जिसके माध्यम से प्रत्येक बार पृष्ठ के शीर्ष पर स्थित लक्ष्य तत्व की स्थिति बताई जाती है।duration : मिलीसेकंड में संक्रमण का समय।increment : लक्ष्य तत्व की प्रारंभिक स्थिति को 40 चरणों में विभाजित करता है।time : प्रत्येक चरण का समय निर्धारित करता है।prev: लक्ष्य तत्व की पिछली स्थिति में scroller()।E: लक्ष्य तत्व की स्थिति रखता है scroller()।वास्तविक कार्य उस scroller()फ़ंक्शन द्वारा किया जाता है जो तब तक खुद को (के माध्यम से setTimeout()) कॉल करना जारी रखता है जब तक कि लक्ष्य तत्व पृष्ठ के शीर्ष पर नहीं होता है या पृष्ठ अधिक नहीं स्क्रॉल कर सकता है।
हर बार scroller()कहा जाता है यह लक्ष्य तत्व (चर में आयोजित की वर्तमान स्थिति की जांच करता है E) और है कि अगर है > 1या < -1और पृष्ठ अभी भी स्क्रॉल बदलाव से खिड़की है अगर incrementपिक्सल - अप या यदि आधार पर नीचे Eएक सकारात्मक या नकारात्मक मूल्य है। जब Eन तो > 1OR < -1, या E=== prevफ़ंक्शन रुक जाता है। मैंने DOMElement.scrollTo()यह सुनिश्चित करने के लिए विधि को पूरा करने पर जोड़ा कि लक्ष्य तत्व खिड़की के शीर्ष पर धमाका था (ऐसा नहीं है कि आप इसे पिक्सेल के एक अंश से बाहर होने की सूचना देंगे!)।
यह देखने के लिए कि क्या पेज स्क्रॉल कर रहा है, यह देखने के लिए ifलाइन 2 के स्टेटमेंट scroller()में (उन मामलों में जहां लक्ष्य पेज के नीचे की ओर हो सकता है और पेज Eअपनी पिछली स्थिति के खिलाफ जांच करके) और आगे नहीं स्क्रॉल कर सकता है prev)।
इसके नीचे की टर्नरी स्थिति शून्य के करीब आते ही incrementमूल्य को कम कर देती Eहै। यह पृष्ठ को एक तरह से ओवरशूट करना बंद कर देता है और फिर दूसरे को ओवरशूट करने के लिए वापस उछलता है, और फिर दूसरे पर फिर से ओवरशूट करने के लिए उछलता है, पिंग-पॉन्ग शैली, अनंत और उससे आगे।
यदि आपका पृष्ठ अधिक है जो c.4000px उच्च है, तो आप टर्नरी अभिव्यक्ति की पहली स्थिति (यहाँ +/- 20) और / या विभाजक में मान बढ़ा सकते हैं जो incrementमूल्य निर्धारित करता है (यहाँ पर 40)।
के साथ खेलना duration, विभाजक जो सेट करता है increment, और की दयनीय स्थिति में मूल्यों को scroller()आपको अपने पृष्ठ के अनुरूप कार्य करने की अनुमति देना चाहिए।
ल्यूबुन्टू पर फ़ायरफ़ॉक्स और क्रोम के अप-टू-डेट संस्करणों में NBTested, और Windows8 पर फ़ायरफ़ॉक्स, क्रोम और IE।
आप स्क्रॉल व्यवहार संपत्ति का उपयोग भी कर सकते हैं । उदाहरण के लिए अपने सीएसएस में नीचे की रेखा जोड़ें
html{
scroll-behavior:smooth;
}और यह एक देशी चिकनी स्क्रॉलिंग सुविधा का परिणाम देगा। स्क्रॉल व्यवहार के बारे में और पढ़ें
मैंने कुछ इस तरह से बनाया है। मुझे कोई पता नहीं है अगर इसके IE8 में काम कर रहा हूँ। IE9, मोज़िला, क्रोम, एज में परीक्षण किया गया।
function scroll(toElement, speed) {
var windowObject = window;
var windowPos = windowObject.pageYOffset;
var pointer = toElement.getAttribute('href').slice(1);
var elem = document.getElementById(pointer);
var elemOffset = elem.offsetTop;
var counter = setInterval(function() {
windowPos;
if (windowPos > elemOffset) { // from bottom to top
windowObject.scrollTo(0, windowPos);
windowPos -= speed;
if (windowPos <= elemOffset) { // scrolling until elemOffset is higher than scrollbar position, cancel interval and set scrollbar to element position
clearInterval(counter);
windowObject.scrollTo(0, elemOffset);
}
} else { // from top to bottom
windowObject.scrollTo(0, windowPos);
windowPos += speed;
if (windowPos >= elemOffset) { // scroll until scrollbar is lower than element, cancel interval and set scrollbar to element position
clearInterval(counter);
windowObject.scrollTo(0, elemOffset);
}
}
}, 1);
}
//call example
var navPointer = document.getElementsByClassName('nav__anchor');
for (i = 0; i < navPointer.length; i++) {
navPointer[i].addEventListener('click', function(e) {
scroll(this, 18);
e.preventDefault();
});
}
विवरण
pointerतत्व को भूल जाओ और अगर यह "href" का गुण रखता है तो हाँ, "#" से छुटकारा पाएंelem"#" के बिना सूचक चरelemOffsetपेज के ऊपर से "स्क्रॉल टू" एलिमेंट की शुरुआतआप उपयोग कर सकते हैं
document.querySelector('your-element').scrollIntoView({behavior: 'smooth'});
यदि आप पृष्ठ के शीर्ष को स्क्रॉल करना चाहते हैं, तो आप शीर्ष में एक खाली तत्व रख सकते हैं, और उस तक स्क्रॉल को स्क्रॉल कर सकते हैं।
आप सादे जावास्क्रिप्ट के साथ आसानी से स्क्रॉल करने के लिए window.scrollTo और setTimeout के साथ लूप के लिए उपयोग कर सकते हैं। मेरे scrollToSmoothlyफ़ंक्शन के साथ एक तत्व को स्क्रॉल करने के लिए : scrollToSmoothly(elem.offsetTop)(मान elemलेना एक DOM तत्व है)। आप दस्तावेज़ में किसी भी वाई-स्थिति के लिए आसानी से स्क्रॉल करने के लिए इसका उपयोग कर सकते हैं।
function scrollToSmoothly(pos, time){
/*Time is only applicable for scrolling upwards*/
/*Code written by hev1*/
/*pos is the y-position to scroll to (in pixels)*/
if(isNaN(pos)){
throw "Position must be a number";
}
if(pos<0){
throw "Position can not be negative";
}
var currentPos = window.scrollY||window.screenTop;
if(currentPos<pos){
var t = 10;
for(let i = currentPos; i <= pos; i+=10){
t+=10;
setTimeout(function(){
window.scrollTo(0, i);
}, t/2);
}
} else {
time = time || 2;
var i = currentPos;
var x;
x = setInterval(function(){
window.scrollTo(0, i);
i -= 10;
if(i<=pos){
clearInterval(x);
}
}, time);
}
}
डेमो:
<script>
var set = 0;
function animatescroll(x, y) {
if (set == 0) {
var val72 = 0;
var val73 = 0;
var setin = 0;
set = 1;
var interval = setInterval(function() {
if (setin == 0) {
val72++;
val73 += x / 1000;
if (val72 == 1000) {
val73 = 0;
interval = clearInterval(interval);
}
document.getElementById(y).scrollTop = val73;
}
}, 1);
}
}
</script>
x = स्क्रॉलटॉप
y = आईडी का उपयोग करने के लिए प्रयोग किया जाता है कि div का
नोट:
शरीर को स्क्रॉल करने के लिए शरीर को एक आईडी देने के लिए।
यहाँ मेरा समाधान है। अधिकांश ब्राउज़रों में काम करता है
document.getElementById("scrollHere").scrollIntoView({behavior: "smooth"});
document.getElementById("end").scrollIntoView({behavior: "smooth"});body {margin: 0px; display: block; height: 100%; background-image: linear-gradient(red, yellow);}
.start {display: block; margin: 100px 10px 1000px 0px;}
.end {display: block; margin: 0px 0px 100px 0px;}<div class="start">Start</div>
<div class="end" id="end">End</div>निम्नलिखित चिकनी स्क्रॉलिंग का उपयोग करने के साथ ठीक काम कर रहा है:
html {
scroll-behavior: smooth;
}यहाँ कोड है कि मेरे लिए काम किया है।
`$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
var $target = $(target);
$target.focus();
if ($target.is(":focus")) {
return false;
} else {
$target.attr('tabindex','-1');
$target.focus();
};
});
}
}
});
`