jQuery स्क्रॉलटॉप क्रोम में काम नहीं कर रहा है लेकिन फ़ायरफ़ॉक्स में काम कर रहा है

80

मैंने scrollTopशीर्ष पर नेविगेट करने के लिए jQuery में एक फ़ंक्शन का उपयोग किया है , लेकिन कुछ बदलाव किए जाने के बाद सफारी और क्रोम (अजीब एनीमेशन के बिना स्क्रॉलिंग) में काम करना बंद कर दिया है।

लेकिन यह अभी भी फ़ायरफ़ॉक्स में आसानी से काम कर रहा है। क्या गलत हो सकता है?

यहाँ jQuery फ़ंक्शन का उपयोग किया गया है,

jQuery:

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});

एचटीएमएल

<a id="gotop" href="#">Go Top </a>

सीएसएस

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}
jquery  jquery-ui  jquery-selectors 
— माजू
स्रोत
1
jsbin.com/erade/2 क्रोम पर ठीक काम करता है
— jAndy
@jAndy, मैं सोच रहा था कि scrollTop, जो एक वैध सीएसएस संपत्ति नहीं है, आपके डेमो पर काम करता है? ... क्या आप इसके बारे में कुछ जानकारी या लिंक साझा कर सकते हैं?
— रिगेल
@ रीगेल: मुझे मानना ​​होगा, मैं नहीं कर सकता। मैं इसे एक ब्लैकबॉक्स की तरह बहुत ज्यादा इस्तेमाल करता हूं, लेकिन jQuery infact इसे crossbrowser को सामान्य करता है।
— जॉन्डी
@jAndy - ठीक है ... लेकिन मुझे लगता है कि scrollTopचेतन मानचित्र के गुणों के अंदर उपयोग करना उचित नहीं होगा ... मैं अभी भी खुदाई कर रहा हूँ ..
— Reigel
— मिस्टर क्यू

जवाबों:

106

प्रयोग करके देखें $("html,body").animate({ scrollTop: 0 }, "slow");

यह मेरे लिए क्रोम में काम करता है।

— हारून हारून
स्रोत
हाँ। थैंक्स।
— माजू
3
इसका एक साइड इफेक्ट है: एक कॉलबैक फ़ंक्शन को दो बार (प्रत्येक तत्व के लिए एक बार) कहा जाएगा। इसके लिए कोई भी स्मार्ट वर्कअराउंड, कोई भी?
— बुबुबाबा
8
रखो: अगर (यह.नोडनाम == "बॉडी") {वापसी; } आपके कॉलबैक फ़ंक्शन की शुरुआत में केवल html एलिमेंट से कॉलबैक जाएगा। यह भी याद रखें कि html तत्वों पर नोडनेम विशेषता हमेशा अपरकेस होती है।
— बॉबी
1
यह इंगित करने के लिए @Bobby का धन्यवाद! कॉलबैक फ़ंक्शन का उपयोग करते समय अत्यधिक उपयोगी है कि एक बार आग लगनी चाहिए और सभी ब्राउज़रों में काम करना चाहिए! टीए!
— सेबस्टियन
1
मुझे सभी ब्राउज़रों में काम करने के लिए $ ("बॉडी, html") का उपयोग करना था।
— टॉम किनकैड
57

यदि आपके CSS htmlतत्व में निम्न overflowमार्कअप है, scrollTopतो कार्य नहीं करेगा।

html {
    overflow-x: hidden;
    overflow-y: hidden;
}

scrollTopस्क्रॉल करने की अनुमति देने के लिए, अपना मार्कअप संशोधित करें मार्कअप overflowको htmlएलीमेंट से हटा दें और एलीमेंट को bodyएलिमेंट कर दें। 

body { 
    overflow-x: hidden;
    overflow-y: hidden;
}
— user2971963
स्रोत
4
यह शायद 4 साल से अधिक पुराना है, लेकिन यह अभी भी मेरी समस्या का समाधान था
— राफेल रॉलोटोक
1
@ लंदन में यह क्रोम 41 में समाधान है। इस सवाल का जवाब देने वाले उत्तर को हतोत्साहित न करें।
— कृमि
1
@Leandro इस आदमी ने सिर्फ मेरी जान बचाई! इसने मेरे लिए काम किया
— liltof
ओह माय गॉड इसने मेरे लिए TWO समस्याओं को हल किया। बहुत बहुत धन्यवाद <3
— 10:44 बजे ओसामा एल्डोइस
मैं ... यह काम नहीं कर रहा था, यह पता लगाने की कोशिश कर रहे 5 घंटे से अधिक का समय। इस के लिए बहुत बहुत धन्यवाद!
— काली मिर्च
15

यदि आप स्क्रॉलटॉप () 'दस्तावेज़' के साथ उपयोग करते हैं तो यह दोनों ब्राउज़रों में काम करता है:

$(document).scrollTop();

... 'html' या 'बॉडी' के बजाय। दूसरी तरह से यह दोनों ब्राउज़रों में एक ही समय में काम नहीं करेगा।

— एलेजांद्रो डेल रियो
स्रोत
दस्तावेज़ मेरे लिए तब काम आया जब 'html' और 'body' नहीं थे। धन्यवाद :)
— ConorLuddy
5

मैंने इसका उपयोग Chrome, Firefox, और Safari में सफलता के साथ किया है। IE में अभी तक इसका परीक्षण नहीं कर पाए हैं।

if($(document).scrollTop() !=0){
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

"अगर" कथन का कारण यह जांचना है कि उपयोगकर्ता साइट के शीर्ष पर तैयार है या नहीं। यदि हां, तो एनीमेशन मत करो। इस तरह हमें स्क्रीन रिज़ॉल्यूशन के बारे में इतना परेशान होने की ज़रूरत नहीं है।

कारण मैं $(document).scrollTopइसके बजाय का उपयोग करें । $('html,body')कारण है कि Chrome हमेशा किसी कारण से 0 लौटाता है।

— स्टीवन
स्रोत
3

मुझे क्रोम में स्क्रॉलिंग के साथ एक ही समस्या थी। इसलिए मैंने अपनी शैली फ़ाइल से कोड की इस पंक्तियों को हटा दिया ।

html{height:100%;}
body{height:100%;}

अब मैं स्क्रॉल के साथ खेल सकता हूँ और यह काम करता है: 

var pos = 500;
$("html,body").animate({ scrollTop: pos }, "slow");
— राम
स्रोत
वाह। यह पूरी तरह से मेरा मुद्दा तय हो गया! मुझे स्क्रॉलपटॉप काम करने के लिए नहीं मिला, लेकिन एक बार जब मैंने ऊंचाई को हटा दिया: शरीर से 100% और एचटीएमएल तत्व ने इसे बहुत अच्छा काम किया। धन्यवाद धन्यवाद धन्यवाद।
— agon024
@ agon024, मैं भी खुश हूं;) वास्तव में मैंने कई घंटों के परीक्षण के बाद इस समाधान की स्थापना की और आप जैसे किसी एक के लिए यहां कोशिश की और लिखा।
— RAM
2

शरीर को स्क्रॉल करें और जांचें कि क्या उसने काम किया है:

function getScrollableRoot() {
    var body = document.body;
    var prev = body.scrollTop;
    body.scrollTop++;
    if (body.scrollTop === prev) {
        return document.documentElement;
    } else {
        body.scrollTop--;
        return body;
    }
}


$(getScrollableRoot()).animate({ scrollTop: 0 }, "slow");

यह अधिक कुशल है $("html, body").animateक्योंकि केवल एक एनीमेशन का उपयोग किया गया है, दो नहीं। इस प्रकार, केवल एक कॉलबैक आग, दो नहीं।

— एनवीआई
स्रोत
अच्छी नौकरी! मेरी बहुत मदद की!
— गोगाचिंचलदेज़
1

शायद आपका मतलब है top: 0

$('a#gotop').click(function() {
  $("html").animate({ top: 0 }, "slow", function() { 
                                           alert('Animation complete.'); });
  //return false;
});

से चेतन डॉक्स

.animate ( गुण , [अवधि], [सहज]], [कॉलबैक])
गुण CSS गुणों का एक नक्शा है जो एनीमेशन की ओर बढ़ेगा।
...

या $(window).scrollTop()?

$('a#gotop').click(function() {
  $("html").animate({ top: $(window).scrollTop() }, "slow", function() { 
                                                              alert('Animation complete.'); });
  //return false;
});
— Reigel
स्रोत
अभी भी एनीमेशन काम नहीं कर रहा है। सरल समाधान मिला। मुझे केवल "html" के बजाय "बॉडी, html" या "html, बॉडी" का उपयोग करना था।
— माजू
1 
// if we are not already in top then see if browser needs html or body as selector
var obj = $('html').scrollTop() !== 0 ? 'html' : 'body';

// then proper delegate using on, with following line:
$(obj).animate({ scrollTop: 0 }, "slow");

लेकिन, सबसे अच्छा तरीका यह है कि आप अपने व्यूपोर्ट में सिर्फ देशी एपीआई का उपयोग करके स्क्रॉल करें (क्योंकि आप ऊपर स्क्रॉल करते हैं वैसे भी यह सिर्फ आपका बाहरी div हो सकता है):

document.getElementById('wrapperIDhere').scrollIntoView(true);
— मार 10
स्रोत
यह सबसे अच्छा तरीका के साथ इस मुद्दे को नजरअंदाज overflow-x: hidden;पर htmlक्रोम में। हालाँकि यह सुचारू रूप से स्क्रॉल नहीं .animate()करता है।
— जिम्मी
0

इस समस्या को हल करने का एक बेहतर तरीका इस तरह से एक फ़ंक्शन का उपयोग करना है:

function scrollToTop(callback, q) {

    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, function() {
            console.log('html scroll');
            callback(q)
        });
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, function() {
            console.log('body scroll');
            callback(q)
        });
        return;
    }

    callback(q);
}

यह सभी ब्राउज़रों में काम करेगा और फ़ायरफ़ॉक्स को दो बार स्क्रॉल करने से रोकता है (जो कि यदि आप स्वीकृत उत्तर का उपयोग करते हैं - तो क्या होता है $("html,body").animate({ scrollTop: 0 }, "slow");)।

— चक ले बट
स्रोत
0

क्रोम, फ़ायरफ़ॉक्स और एज पर परीक्षण, मेरे लिए ठीक काम करने वाला एकमात्र समाधान इस तरह से हारून के समाधान के साथ सेटटाइमआउट का उपयोग कर रहा है:

setTimeout( function () {
    $('body, html').stop().animate({ scrollTop: 0 }, 100);
}, 500);

जब मैंने पृष्ठ को पुनः लोड किया, तो मेरे लिए क्रोम और एज में, अन्य समाधानों में से किसी ने भी प्रीवियस स्क्रॉलटॉप को रीसेट नहीं किया। दुर्भाग्य से एज में अभी भी थोड़ा "झटका" है।

— यवसुरा
स्रोत
0

इसलिए मुझे भी यह समस्या हो रही थी और मैंने यह फ़ंक्शन लिखा है:

/***Working function for ajax loading Start*****************/
function fuweco_loadMoreContent(elmId/*element ID without #*/,ajaxLink/*php file path*/,postParameterObject/*post parameters list as JS object with properties (new Object())*/,tillElementEnd/*point of scroll when must be started loading from AJAX*/){
	var	
		contener = $("#"+elmId),
		contenerJS = document.getElementById(elmId);
	if(contener.length !== 0){
		var	
			elmFullHeight = 
				contener.height()+
				parseInt(contener.css("padding-top").slice(0,-2))+
				parseInt(contener.css("padding-bottom").slice(0,-2)),
			SC_scrollTop = contenerJS.scrollTop,
			SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight;
		if(SC_scrollTop >= SC_max_scrollHeight - tillElementEnd){
			$("#"+elmId).unbind("scroll");
			$.post(ajaxLink,postParameterObject)
			 .done(function(data){
			 	if(data.length != 0){
					$("#"+elmId).append(data);
					$("#"+elmId).scroll(function (){
						fuweco_reloaderMore(elmId,ajaxLink,postParameterObject);
					});
				}
			 });
		}
	}
}
/***Working function for ajax loading End*******************/
/***Sample function Start***********************************/
function reloaderMore(elementId) {
	var
		contener = $("#"+elementId),
		contenerJS = document.getElementById(elementId)
	;

    if(contener.length !== 0){
    	var
			elmFullHeight = contener.height()+(parseInt(contener.css("padding-top").slice(0,-2))+parseInt(contener.css("padding-bottom").slice(0,-2))),
			SC_scrollTop = contenerJS.scrollTop,
			SC_max_scrollHeight = contenerJS.scrollHeight-elmFullHeight
		;
		if(SC_scrollTop >= SC_max_scrollHeight - 200){
			$("#"+elementId).unbind("scroll");
			$("#"+elementId).append('<div id="elm1" style="margin-bottom:15px;"><h1>Was loaded</h1><p>Some text for content. Some text for content. Some text for content.	Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content. Some text for content.</p></div>');
			$("#"+elementId).delay(300).scroll(function (){reloaderMore(elementId);});
		}
    }
}
/***Sample function End*************************************/
/***Sample function Use Start*******************************/
$(document).ready(function(){
	$("#t1").scrollTop(0).scroll(function (){
		reloaderMore("t1");
    });
});
/***Sample function Use End*********************************/
.reloader {
    border: solid 1px red;
    overflow: auto;
    overflow-x: hidden;
    min-height: 400px;
    max-height: 400px;
    min-width: 400px;
    max-width: 400px;
    height: 400px;
    width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<div class="reloader" id="t1">
		<div id="elm1" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>
		<div id="elm2" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>
		<div id="elm3" style="margin-bottom:15px;">
			<h1>Some text for header.</h1>
			<p>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
				Some text for content.<br>
			</p>
		</div>		
	</div>
स्निपेट का विस्तार करें

मुझे उम्मीद है कि यह अन्य प्रोग्रामर के लिए मददगार होगा।

— व्लादिमीर ए।
स्रोत
0

अगर यह html, बॉडी सिलेक्टर के साथ मोज़िला के लिए ठीक काम करता है, तो एक अच्छा मौका है कि समस्या अतिप्रवाह से संबंधित है, अगर html या शरीर में अतिप्रवाह ऑटो पर सेट है, तो यह क्रोम को अच्छी तरह से काम नहीं करेगा। , कारण जब यह ऑटो पर सेट होता है, तो चेतन पर स्क्रॉलटॉप प्रॉपर्टी काम नहीं करेगी, मुझे ठीक से पता नहीं है कि क्यों! लेकिन समाधान ओवरफ्लो को छोड़ना है, इसे सेट न करें! यह मेरे लिए हल! यदि आप इसे ऑटो पर सेट कर रहे हैं, तो इसे हटा दें!

यदि आप इसे छिपे हुए पर सेट कर रहे हैं, तो इसे "user2971963" उत्तर में वर्णित करें (ctrl + f को खोजने के लिए)। आशा है कि यह उपयोगी है!

— मोहम्मद अल्ल
स्रोत
0 
 $("html, body").animate({ scrollTop: 0 }, "slow");

स्क्रॉल के साथ यह सीएसएस संघर्ष शीर्ष पर है इसलिए इसका ध्यान रखें 

 html, body {
         overflow-x: hidden;        
    }
— आशुतोष झा
स्रोत
-3

मुझे नहीं लगता कि स्क्रॉलटॉप एक वैध संपत्ति है। यदि आप स्क्रॉल करना चाहते हैं, तो jquery के लिए स्क्रॉलटो प्लगइन आज़माएँ

http://plugins.jquery.com/project/ScrollTo

— बेन रोवे
स्रोत
मैंने कब कहा कि स्क्रॉलटॉप () एक संपत्ति है? आपको प्लगइन का उपयोग करने की आवश्यकता नहीं है क्योंकि यह फ़ंक्शन पहले से ही jQuery में लागू है।
— बेयर्ड रान्डेल
@ बियान - आपके हटाए गए उत्तर का जवाब होगा When did I say scrollTop() is a property?और इसके अलावा, ओपी एक चिकनी एनीमेशन चाहता है, चिकनी कर scrollTop()सकता है? ... और यह ध्यान देने योग्य है कि बेन का उत्तर स्पष्ट रूप से ऊपर है, I don't think the scrollTop is a valid propertyऔर आपने टिप्पणी की scrollTop() is valid jQuery...
— रीगेल
1
@ माजू मेला काफी। खुशी है कि आपने अपनी समस्या को सुलझा लिया लेकिन :)
— बेन रोवे
@ रीगेल ScrollTopठीक- ठाक काम करता है: jsfiddle.net/JohnnyWalkerDesign/w4hetv45
— चक ले बट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.