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




scroll (24)

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

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


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

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

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

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


जब शीर्ष स्क्रॉल सीमा नीचे से नीचे और नीचे स्क्रॉल करने के लिए नीचे शीर्ष है शीर्षलेख चिपचिपा है। नीचे उदाहरण उदाहरण देखें।

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/


<script>

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

एचटीएमएल में

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

यदि आपको एनिमेट करने के लिए परिवर्तन की आवश्यकता नहीं है तो आपको किसी विशेष प्लगइन का उपयोग करने की आवश्यकता नहीं है - मैं केवल मूल जावास्क्रिप्ट विंडो.scrollTo विधि का उपयोग करता हूं - 0,0 में गुजरने से पृष्ठ को बाईं ओर तुरंत बाईं ओर स्क्रॉल किया जाएगा ।

window.scrollTo(x-coord, y-coord);

पैरामीटर

  • x-coord क्षैतिज धुरी के साथ पिक्सेल है।
  • y-coord लंबवत धुरी के साथ पिक्सेल है।

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

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

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

सभी ब्राउज़र सक्रिय करें। सौभाग्य

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }

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

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

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

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

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

आप बस अपने लिंक से एक लक्ष्य का उपयोग कर सकते हैं, जैसे # सोमेड, जहां # सोमेड div की आईडी है।

या, आप स्क्रॉलिंग प्लगइन की किसी भी संख्या का उपयोग कर सकते हैं जो इसे और अधिक सुरुचिपूर्ण बनाता है।

http://plugins.jquery.com/project/ScrollTo एक उदाहरण है।


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

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

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

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

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

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

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

छोटा और सरल!


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

window.location = '#'

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

नमूना डेमो:

output.jsbin.com/fakumo#

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


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

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

ऐसा करने के लिए आपको jQuery की आवश्यकता नहीं है। एक मानक एचटीएमएल टैग पर्याप्त होगा ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

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

window.scrollTo(0, 0); साथ 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 फ़ील्ड को इंगित करते हुए एक संवाद div खोलता है, 3sec के बाद यह fades


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

<script>
    $(window).scrollTop(100);
</script>

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

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

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

यदि आप चिकनी स्क्रॉलिंग करना चाहते हैं, तो कृपया इसे आजमाएं:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

एक और समाधान जावास्क्रिप्ट window.scrollTo विधि है:

 window.scrollTo(x-value, y-value);

पैरामीटर्स:

  • एक्स-वैल्यू क्षैतिज धुरी के साथ पिक्सेल है।
  • y-value लंबवत धुरी के साथ पिक्सेल है।

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

   $(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 के साथ एक चीज़ को एनिमेट करने के लिए एक क्लिक का उपयोग करना चाहते हैं, लेकिन एनीमेशन के बिना कोई और करें? यानी पृष्ठ के शीर्ष पर एक स्लाइड-इन व्यवस्थापक लॉगिन पैनल खोलें, और इसे देखने के लिए तुरंत शीर्ष पर जाएं।


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

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





scroll