मैं जावास्क्रिप्ट का उपयोग करके पृष्ठ के शीर्ष पर कैसे स्क्रॉल करूं? यह भी वांछनीय है, अगर स्क्रॉलबार तुरंत शीर्ष पर कूदता है। मैं एक चिकनी स्क्रॉल के लिए नहीं देख रहा हूँ।
जवाबों:
अगर आपको चेतन में परिवर्तन की आवश्यकता नहीं है, तो आपको किसी विशेष प्लगइन्स का उपयोग करने की आवश्यकता नहीं है - मैं सिर्फ मूल जावास्क्रिप्ट का उपयोग करूँगा। WindowTscTo विधि - 0,0 में पास होने पर पृष्ठ को तुरंत ऊपर बाईं ओर स्क्रॉल करेंगे ।
window.scrollTo(x-coord, y-coord);पैरामीटर
window.scrollTo(0, document.body.scrollHeight);
यदि आप चिकनी स्क्रॉलिंग करना चाहते हैं, तो कुछ इस तरह की कोशिश करें:
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});वह कोई भी <a>टैग लेगा, जिसके href="#top"शीर्ष पर उसे सुगम स्क्रॉल बनाया जाएगा।
window.pageYOffsetविंडो की संपत्ति होगी e̶l̶e̶m̶e̶n̶t̶ वस्तु।
शीर्ष पर स्क्रॉल करने के लिए इसे आज़माएं
<script>
$(document).ready(function(){
$(window).scrollTop(0);
});
</script>चिकनी एनीमेशन के साथ बेहतर समाधान:
// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });संदर्भ: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example
ऐसा करने के लिए आपको jQuery की आवश्यकता नहीं है। एक मानक HTML टैग पर्याप्त होगा ...
<div id="jump_to_me">
blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>ये सभी सुझाव विभिन्न स्थितियों के लिए शानदार काम करते हैं। जो लोग खोज के माध्यम से इस पृष्ठ को ढूंढते हैं, वे भी इसे आज़मा सकते हैं। JQuery, कोई प्लग-इन, तत्व तक स्क्रॉल न करें।
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);<script>
$(function(){
var scroll_pos=(0);
$('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>संपादित करें:
$('html, body').animate({scrollTop:(scroll_pos)}, 2000);शीर्ष और बाएँ मार्जिन के साथ दूसरा तरीका स्क्रॉल करें:
window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });animateफ़ंक्शन में अवधि के लिए एक स्ट्रिंग का उपयोग नहीं कर सकते हैं , इसके बजाय आपको उपयोग करना चाहिए: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
<script>
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
</script>html में
<a href="#top">go top</a>वास्तव में अजीब है: यह सवाल अब पांच साल के लिए सक्रिय है और अभी भी स्क्रॉल करने के लिए चेतावनियों का कोई वैनिला जावास्क्रिप्ट जवाब नहीं है ... इसलिए यहां आप जाएं:
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset;
if ( pos > 0 ) {
window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
} else {
window.clearInterval( scrollToTop );
}
}, 16); // how fast to scroll (this equals roughly 60 fps)यदि आप चाहें, तो आप इसे एक फ़ंक्शन में लपेट सकते हैं और उस onclickविशेषता के माध्यम से कॉल कर सकते हैं । इस jsfiddle की जाँच करें
नोट: यह एक बहुत ही बुनियादी समाधान है और शायद सबसे अधिक प्रदर्शन करने वाला नहीं है। एक बहुत विस्तृत उदाहरण यहाँ पाया जा सकता है: https://github.com/cferdinandi/smooth-scroll
यदि आप चिकनी स्क्रॉलिंग करना चाहते हैं, तो कृपया यह प्रयास करें:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});एक अन्य समाधान जावास्क्रिप्ट window.scrollTo विधि है:
window.scrollTo(x-value, y-value);पैरामीटर:
के साथ window.scrollTo(0, 0);बहुत तेज़ है
इसलिए मैंने मार्क उर्सिनो उदाहरण की कोशिश की, लेकिन क्रोम में कुछ भी नहीं होता है
और मैंने यह पाया
$('.showPeriodMsgPopup').click(function(){
//window.scrollTo(0, 0);
$('html').animate({scrollTop:0}, 'slow');//IE, FF
$('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
$('.popupPeriod').fadeIn(1000, function(){
setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
});
});सभी 3 ब्राउज़रों का परीक्षण किया और यह काम करता है
मैं खाका सीएसएस का उपयोग कर रहा हूं
यह तब है जब एक ग्राहक "अभी बुक करें" बटन पर क्लिक करता है और किराये की अवधि का चयन नहीं करता है, धीरे-धीरे उस शीर्ष पर जाता है जहां कैलेंडर हैं और एक डायलॉग डिव को खोलता है। 2 क्षेत्रों, 3sec के बाद यह fades
एक बहुत की उन क्रॉस-ब्राउज़र संगतता के लिए दोनों एचटीएमएल और शरीर टैग चयन करने की अनुशंसा, इसलिए की तरह:
$('html, body').animate({ scrollTop: 0 }, callback);यदि आप केवल एक बार चल रहे कॉलबैक पर भरोसा कर रहे हैं तो यह आपकी यात्रा कर सकता है। यह वास्तव में दो बार चलेगा क्योंकि आपने दो तत्वों का चयन किया है।
यदि वह आपके लिए एक समस्या है, तो आप कुछ इस तरह से कर सकते हैं:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
$('body').animate({ scrollTop: 0 }, callback);
}यह कार्य Chrome $('html').scrollTop()रिटर्न 0 में है, लेकिन फ़ायरफ़ॉक्स जैसे अन्य ब्राउज़रों में नहीं।
यदि आप इस मामले में एनीमेशन के पूरा होने का इंतजार नहीं करना चाहते हैं कि स्क्रॉलबार पहले से ही शीर्ष पर है, तो यह प्रयास करें:
function scrollToTop(callback) {
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, callback);
return;
}
if ($('body').scrollTop()) {
$('body').animate({ scrollTop: 0 }, callback);
return;
}
callback();
}पुरानी #topचाल चल सकते हैं
document.location.href = "#top";एफएफ, आईई और क्रोम में ठीक काम करता है
$(".scrolltop").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}
.scrolltop{
position:fixed;
right:10px;
bottom:10px;
color:#fff;
}<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>आप JQuery इनबिल्ट फ़ंक्शन स्क्रॉलटॉप का उपयोग क्यों नहीं करते हैं:
$('html, body').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottomलघु और सरल!
आपको JQuery की आवश्यकता नहीं है। बस आप स्क्रिप्ट को कॉल कर सकते हैं
window.location = '#'"ऊपर जाएं" बटन पर क्लिक करें
नमूना डेमो:
PS: इस दृष्टिकोण का उपयोग न करें, जब आप आधुनिक पुस्तकालयों जैसे कोणीयरज का उपयोग कर रहे हों। इससे URL हैशबैंग टूट सकता है।
बस इस स्क्रिप्ट का उपयोग स्क्रॉल करने के लिए सीधे ऊपर करें।
<script>
$(document).ready(function(){
$("button").click(function(){
($('body').scrollTop(0));
});
});
</script>शुद्ध जावास्क्रिप्ट समाधान:
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});मैं कोडपेन पर एक एनिमेटेड समाधान लिखता हूं
इसके अलावा, आप सीएसएस scroll-behavior: smoothसंपत्ति के साथ एक और समाधान की कोशिश कर सकते हैं।
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}यदि आप चिकनी स्क्रॉलिंग नहीं चाहते हैं, तो आप इसे शुरू करते ही बहुत आसानी से चिकनी स्क्रॉलिंग एनीमेशन को धोखा और बंद कर सकते हैं ... जैसे:
$(document).ready(function() {
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "1");
$('html, body').stop(true, true);
//Anything else you want to do in the same action goes here
return false;
});
});मुझे नहीं पता कि यह अनुशंसित है / अनुमति है, लेकिन यह काम करता है :)
आप इसका उपयोग कब करेंगे? मुझे यकीन नहीं है, लेकिन शायद जब आप एक क्लिक का उपयोग करने के लिए एक चीज़ के साथ चेतन का उपयोग करना चाहते हैं, लेकिन एनीमेशन के बिना एक और करें? यानी पृष्ठ के शीर्ष पर एक स्लाइड-इन व्यवस्थापक लॉगिन पैनल खोलें, और इसे देखने के लिए तुरंत शीर्ष पर जाएं।
यह सरल समाधान मूल रूप से काम करता है और किसी भी स्थिति में एक चिकनी स्क्रॉल लागू करता है।
यह एंकर लिंक (उन लोगों के साथ #) का उपयोग करने से बचता है, जो मेरी राय में, यदि आप किसी अनुभाग से लिंक करना चाहते हैं, तो उपयोगी हैं, लेकिन कुछ स्थितियों में इतना सहज नहीं हैं, विशेष रूप से जब ऊपर की ओर इशारा करते हैं जो दो अलग-अलग URL की ओर इशारा कर सकता है। एक ही स्थान ( http://www.example.org और http://www.example.org/# )।
आप जिस टैग को स्क्रॉल करना चाहते हैं, उसके लिए एक आईडी डालें , उदाहरण के लिए आपका पहला खंड , जो इस प्रश्न का उत्तर देता है, लेकिन आईडी को पृष्ठ में हर जगह रखा जा सकता है।
<body>
<section id="top">
<!-- your content -->
</section>
<div id="another"><!-- more content --></div>फिर एक बटन के रूप में आप एक लिंक का उपयोग कर सकते हैं, बस इस तरह एक कोड के साथ ऑनक्लिक विशेषता को संपादित करें।
<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>जहां का तर्क उस टैग document.getElementByIdका आईडी है जिसे आप क्लिक करने के बाद स्क्रॉल करना चाहते हैं।
आप बस अपने लिंक से एक लक्ष्य का उपयोग कर सकते हैं, जैसे #someid, जहां #someid div की आईडी है।
या, आप किसी भी संख्या में स्क्रॉलिंग प्लग इन का उपयोग कर सकते हैं जो इसे और अधिक सुरुचिपूर्ण बनाते हैं।
http://plugins.jquery.com/project/ScrollTo इसका एक उदाहरण है।
आप इस फिडेल के रूप में जेएस का उपयोग करने की कोशिश कर सकते हैं http://jsfiddle.net/5bNmH/1 के
अपने पृष्ठ पाद लेख में "ऊपर जाएं" बटन जोड़ें:
<footer>
<hr />
<p>Just some basic footer text.</p>
<!-- Go to top Button -->
<a href="#" class="go-top">Go Top</a>
</footer>function scrolltop() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#back-to-top').fadeIn(duration);
} else {
jQuery('#back-to-top').fadeOut(duration);
}
});
jQuery('#back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
}ऊपर दिए गए उत्तरों में से कोई भी SharePoint 2016 में काम नहीं करेगा।
इसे इस तरह करना होगा: /sharepoint/195870/
var w = document.getElementById("s4-workspace");
w.scrollTop = 0;