javascript - जावास्क्रिप्ट/jQuery का उपयोग कर पृष्ठ के शीर्ष पर स्क्रॉल करें?




scroll (20)

आप JQuery इनबिल्ट फ़ंक्शन स्क्रॉल का उपयोग क्यों नहीं करते हैं:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

छोटा और सरल!

मेरे पास पृष्ठ पर एक <button> , जब यह बटन छुपा हुआ है <div> jQuery का उपयोग करके दिखाया गया है।

मैं उस फ़ंक्शन में जावास्क्रिप्ट / jQuery कमांड का उपयोग कर पृष्ठ के शीर्ष पर कैसे स्क्रॉल करूं? यह वांछनीय है भले ही स्क्रॉल बार तुरंत शीर्ष पर कूद जाए। मैं एक चिकनी स्क्रॉलिंग की तलाश नहीं कर रहा हूं।


आप इस फिडल में जेएस का उपयोग करने का प्रयास कर सकते हैं 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>

आपको JQuery की आवश्यकता नहीं है। बस आप स्क्रिप्ट को कॉल कर सकते हैं

window.location = '#'

"शीर्ष पर जाएं" बटन के क्लिक पर

नमूना डेमो:

output.jsbin.com/fakumo#

पीएस: इस दृष्टिकोण का उपयोग न करें, जब आप कोणीय जैसे आधुनिक पुस्तकालयों का उपयोग कर रहे हों। यह यूआरएल हैशबैंग तोड़ सकता है।


इस कोड को आज़माएं:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => डोम एलिमेंट जहां आप स्क्रॉल ले जाना चाहते हैं।

समय => मिलीसेकंड, स्क्रॉल की गति को परिभाषित करें।


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

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>

ऊपर दिए गए कोई भी जवाब SharePoint 2016 में काम नहीं करेगा।

इसे इस तरह किया जाना है: https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;

गैर-jQuery समाधान / शुद्ध जावास्क्रिप्ट:

document.body.scrollTop = document.documentElement.scrollTop = 0;

चिकनी स्क्रॉल, शुद्ध जावास्क्रिप्ट:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

पुराना #top चाल कर सकता है

document.location.href = "#top";

एफएफ, आईई और क्रोम में ठीक काम करता है


यदि आप किसी आईडी के साथ किसी भी तत्व पर स्क्रॉल करना चाहते हैं, तो इसे आजमाएं:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``

यदि आप चिकनी स्क्रॉलिंग चाहते हैं, तो इस तरह कुछ कोशिश करें:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

इसमें कोई भी <a> टैग जिसका href="#top" और इसे शीर्ष पर चिकनी स्क्रॉल करेगा।


यदि आप चिकनी स्क्रॉलिंग नहीं चाहते हैं, तो आप चिकनी स्क्रॉलिंग एनीमेशन को धोखा दे सकते हैं और जैसे ही आप इसे शुरू कर सकते हैं ... जैसे:

   $(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;                              
      });
  });

मुझे नहीं पता कि यह अनुशंसित / अनुमति है, लेकिन यह काम करता है :)

आप इसका इस्तेमाल कब करेंगे? मुझे यकीन नहीं है, लेकिन शायद जब आप Jquery के साथ एक चीज़ को एनिमेट करने के लिए एक क्लिक का उपयोग करना चाहते हैं, लेकिन एनीमेशन के बिना कोई और करें? यानी पृष्ठ के शीर्ष पर एक स्लाइड-इन व्यवस्थापक लॉगिन पैनल खोलें, और इसे देखने के लिए तुरंत शीर्ष पर जाएं।


ये सभी सुझाव विभिन्न स्थितियों के लिए बहुत अच्छा काम करते हैं। उन लोगों के लिए जो इस पृष्ठ को खोज के माध्यम से पाते हैं, कोई भी this आज़मा सकता है। JQuery, कोई प्लग-इन नहीं, तत्व पर स्क्रॉल करें।

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

वास्तव में अजीब: यह सवाल अब पांच साल के लिए सक्रिय है और स्क्रॉलिंग को एनिमेट करने के लिए अभी भी कोई वेनिला जावास्क्रिप्ट उत्तर नहीं है ... तो यहां आप जाएं:

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


सीधे स्क्रॉल करने के लिए स्क्रॉल के लिए इस स्क्रिप्ट का उपयोग करें।

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

$(document).scrollTop(0); भी काम करता है


यह काम करेगा:

window.scrollTo(0, 0);


शीर्ष पर स्क्रॉल करने के लिए इसे आज़माएं

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

एचटीएमएल में

<a href="#top">go top</a>

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>




scroll