ජාවාස්ක්‍රිප්ට් භාවිතයෙන් පිටුවේ ඉහළට අනුචලනය කරන්න?

ජාවාස්ක්‍රිප්ට් භාවිතයෙන් පිටුවේ ඉහළට අනුචලනය කරන්නේ කෙසේද? අනුචලන තීරුව ක්ෂණිකව ඉහළට පැනියද එය යෝග්‍ය වේ. මම සුමට අනුචලනය සොයන්නේ නැත.

ඔබට සජීවිකරණය සඳහා වෙනසක් අවශ්‍ය නොවන්නේ නම් ඔබට විශේෂ ප්ලගීන භාවිතා කිරීමට අවශ්‍ය නොවේ - මම ස්වදේශික ජාවාස්ක්‍රිප්ට් වින්ඩෝස්.ක්‍රෝල්ටෝ ක්‍රමය භාවිතා කරමි - 0,0 පසු කිරීමෙන් පිටුව ක්ෂණිකව ඉහළ වමට අනුචලනය වේ. .

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

පරාමිතීන්

• x-coord යනු තිරස් අක්ෂය දිගේ පික්සෙල් ය.
• y-coord යනු සිරස් අක්ෂය දිගේ පික්සෙල් ය.

ඔබට සුමට අනුචලනය අවශ්‍ය නම්, මේ වගේ දෙයක් උත්සාහ කරන්න:

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

එමඟින් ඕනෑම <a>ටැගයක් href="#top"ගෙන එය ඉහළට අනුචලනය කරයි.

ඉහළට අනුචලනය කිරීමට මෙය උත්සාහ කරන්න

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

සුමට අනුචලනය, පිරිසිදු ජාවාස්ක්‍රිප්ට්:

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

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

ඇත්තෙන්ම අමුතුයි: මෙම ප්‍රශ්නය දැන් වසර පහක් තිස්සේ ක්‍රියාත්මක වන අතර අනුචලනය සජීවිකරණය කිරීම සඳහා තවමත් වැනිලා ජාවාස්ක්‍රිප්ට් පිළිතුරක් නොමැත… එබැවින් මෙන්න ඔබ යන්න:

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>

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

html වලින්

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

ඔබට සුමට අනුචලනය කිරීමට අවශ්‍ය නම්, කරුණාකර මෙය උත්සාහ කරන්න:

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

තවත් විසඳුමක් වන්නේ JavaScript window.scrollTo ක්‍රමය:

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

පරාමිතීන්:

• x- අගය යනු තිරස් අක්ෂය දිගේ පික්සෙල් ය.
• y- අගය යනු සිරස් අක්ෂය දිගේ පික්සෙල් ය.

සමඟ 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 පසු එය මැකී යයි

ඒ ගොඩක් ඇති පරිශීලකයන් එසේ මෙන් හරස් වෙබ් බ්රව්සරය ගැළපුම සඳහා HTML හා ශරීරය ටැග් දෙකම තෝරා නිර්දේශ:

$('html, body').animate({ scrollTop: 0 }, callback);

ඔබ ඔබගේ ඇමතුම් ආපසු ධාවනය කරන්නේ එක් වරක් පමණක් යැයි ගණන් ගන්නේ නම් මෙය ඔබට ඉහළට යා හැකිය. ඔබ මූලද්‍රව්‍ය දෙකක් තෝරාගෙන ඇති නිසා එය ඇත්ත වශයෙන්ම දෙවරක් ක්‍රියාත්මක වේ.

එය ඔබට ගැටළුවක් නම්, ඔබට මේ වගේ දෙයක් කළ හැකිය:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

මෙය ක්‍රියාත්මක වීමට හේතුව ක්‍රෝම් $('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";

FF, IE සහ Chrome වල හොඳින් ක්‍රියා කරයි

JQuery නොවන විසඳුම / පිරිසිදු ජාවාස්ක්‍රිප්ට්:

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

මෙය ක්‍රියාත්මක වනු ඇත:

window.scrollTo(0, 0);

මේක උත්සාහ කරන්න

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

$(document).scrollTop(0); එසේම ක්‍රියාත්මක වේ.

මෙම කේතය උත්සාහ කරන්න:

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

div => ඔබට අනුචලනය කිරීමට අවශ්‍ය තැන Dom Element.

time => මිලි තත්පර, අනුචලන වේගය අර්ථ දක්වන්න.

පිරිසිදු ජාවාස්ක්‍රිප්ට් විසඳුම:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

මම සජීවීකරණ විසඳුමක් ලියමි කෝඩපන් ලියමි

එසේම, ඔබට CSS scroll-behavior: smoothදේපල සමඟ තවත් විසඳුමක් උත්සාහ කළ හැකිය .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

ඔබ JQuery inbuilt ශ්‍රිත අනුචලන ටොප් භාවිතා නොකරන්නේ ඇයි:

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

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

කෙටි හා සරල!

ඔබට JQuery අවශ්‍ය නොවේ. ඔබට ස්ක්‍රිප්ට් එක ඇමතිය හැකිය

window.location = '#'

"ඉහළට යන්න" බොත්තම ක්ලික් කරන්න

නියැදි නිරූපණය:

output.jsbin.com/fakumo#

PS: ඔබ angularjs වැනි නවීන පුස්තකාල භාවිතා කරන විට මෙම ප්‍රවේශය භාවිතා නොකරන්න. එය URL හැෂ්බෑන්ග් බිඳ දැමිය හැකිය.

ඉහළට කෙළින්ම අනුචලනය කිරීම සඳහා මෙම ස්ක්‍රිප්ට් භාවිතා කරන්න.

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

ඔබට සුමට අනුචලනය අවශ්‍ය නොවන්නේ නම්, ඔබ එය ආරම්භ කළ විගසම සුමට අනුචලන සජීවිකරණය වංචා කර නැවැත්විය හැකිය ... එසේ:

   $(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 සමඟ එක් දෙයක් සජීවිකරණය කිරීමට එක් ක්ලික් කිරීමක් භාවිතා කිරීමට අවශ්‍ය වූ විට, නමුත් සජීවිකරණයකින් තොරව තවත් දෙයක් කරන්න? එනම් පිටුවේ ඉහළින් ඇති විනිවිදක පරිපාලක පිවිසුම් පැනලයක් විවෘත කර එය බැලීමට ක්ෂණිකව ඉහළට පනින්න.

අභිප්රේරණය

මෙම සරල විසඳුම දේශීයව ක්‍රියාත්මක වන අතර ඕනෑම ස්ථානයකට සුමට අනුචරණයක් ක්‍රියාත්මක කරයි.

එය #කොටසකට සම්බන්ධ වීමට අවශ්‍ය නම් ප්‍රයෝජනවත් වන නමුත් සමහර අවස්ථාවල එතරම් පහසු නොවන බව නැංගුරම් සබැඳි (ඇති අය ) භාවිතා කිරීමෙන් එය වළක්වයි , විශේෂයෙන් ඉහළට යොමු කරන විට විවිධ 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 නිදසුනකි.

මෙම ෆෙඩෙල් හි මෙන් ඔබට JS භාවිතා කිරීමට උත්සාහ කළ හැකිය 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;
    });
}

ඉහත පිළිතුරු කිසිවක් ෂෙයාර්පොයින්ට් 2016 හි ක්‍රියාත්මක නොවේ.

එය මේ ආකාරයට කළ යුතුය: /sharepoint/195870/

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