මූලද්රව්යයට අනුචලනය කරන්න

2339

මට මෙම inputඅංගය ඇත:

<input type="text" class="textfield" value="" id="subject" name="subject">

එවිට මට වෙනත් පෙළ යෙදවුම්, පෙළපොත් ආදිය වැනි තවත් අංග කිහිපයක් තිබේ.

පරිශීලකයා ඒ inputසමඟ ක්ලික් කළ විට #subject, පිටුව හොඳ සජීවිකරණයක් සමඟ පිටුවේ අවසාන අංගයට අනුචලනය කළ යුතුය. එය ඉහළට නොව පහළට පහළට අනුචලනය විය යුතුය.

පිටුවේ අවසාන අයිතමය පහත දැක්වෙන submitබොත්තමකි #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

සජීවිකරණය ඉතා වේගවත් නොවිය යුතු අතර තරල විය යුතුය.

මම නවතම jQuery අනුවාදය ධාවනය කරමි. මම කැමති ඕනෑම ප්ලගිනයක් ස්ථාපනය කිරීමට නොව මෙය සාක්ෂාත් කර ගැනීම සඳහා සුපුරුදු jQuery විශේෂාංග භාවිතා කිරීමට ය.

javascript jquery scroll

— ඩියාගෝ පී.
source

3

developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— ක්රිස්ටෝෆ් Roussy

scrollToක්‍රෝම් ප්ලගිනයක් නිසා මා සඳහා අක්‍රීය කර ඇත, කුමනදැයි විශ්වාස නැත.

— ජැක්සන්කර්

4032

ඔබට හැඳුනුම්පත සමඟ බොත්තමක් ඇතැයි උපකල්පනය කර button, මෙම උදාහරණය උත්සාහ කරන්න:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

JQuery ප්ලගිනයක් නොමැති මූලද්‍රව්‍යයක් වෙත සුමටව අනුචලනය කරන්න යන ලිපියෙන් මට කේතය ලැබුණි . පහත උදාහරණයෙන් මම එය පරීක්ෂා කර ඇත්තෙමි.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

ස්නිපටය පුළුල් කරන්න

— ස්ටීව්
source

24

මෙය සෑම අවස්ථාවකම ක්‍රියාත්මක නොවේ. Stackoverflow.com/questions/2905867/…

— ජැනිස් එල්මරිස්

7

Ar බැරී චැප්මන් හරියටම නොවේ. ගූගල් කිරීමෙන් පසු මම මෙය සොයාගත්තෙමි , එබැවින් ඔබට බ්‍රව්සර් වර්ගයකට අමතර තර්කනයක් අවශ්‍ය නොවන්නේ නම් ටැග් දෙකම අවශ්‍ය වේ.

— s3m3n

73

ඔබට සජීවිකරණය අවශ්‍ය නැතිනම්, ඒ වෙනුවට ක්ෂණිකව මූලද්‍රව්‍යයට පනින්නට අවශ්‍ය නම්, .scrollTop(…)ඒ වෙනුවට භාවිතා කරන්න .animate({scrollTop: …}, …).

— රෝරි ඕ'කේන්

11

ඔබ විසඳුමට අමතරව (එය විශිෂ්ට ලෙස ක්‍රියා කරයි), ඔබට යූආර්එල් වෙත හැෂ් ටැගය එක් කරන සම්පූර්ණ ශ්‍රිතයක් එක් කළ හැකිය. මෙම අවස්ථාවේදී එය අනුචලනය නොවනු ඇත, මන්ද අනුචලනය දැනටමත් නිවැරදි ස්ථානයට අනුචලනය වී ඇති අතර පරිශීලකයෙකු URL පිටපත් කළහොත් එය ස්වයංක්‍රීයව පිටුවේ නිවැරදි ස්ථානයට වැටෙනු ඇත.

— සැන්ඩර්

10

සජීවිකරණය සම්පුර්ණ වූ විට ධාවනය කිරීමට ඔබ කෝල්බැක් භාවිතා කරන්නේ නම් සහ මෙම විසඳුම සමඟ ඇමතුම් ආපසු දෙවරක් ගිනි ගනී නම්, "$ ('html body') භාවිතා කිරීමට උත්සාහ කරන්න. සජීවීකරණය කරන්න (... 'වෙනුවට" $ (' html, body ') .animate (... "කොමාව සජීවීකරණ සිදුවීම් දෙකක් නිර්මාණය කළේය. එකක් html සඳහා, ශරීරයට එකක්. ඔබට ඇත්ත වශයෙන්ම html ශරීරයට එකක් අවශ්‍යයි ස්තූතියි @TJ Crowder stackoverflow.com/questions/8790752/…

— බෝට්කෝඩ්

527

jQuery .scrollTo (): බලන්න - නිරූපණය , API, ප්‍රභවය

පිටුව / මූලද්රව්ය අනුචලනය කිරීම පහසු කිරීම සඳහා මම මෙම සැහැල්ලු ප්ලගිනය ලිවීය. ඔබට ඉලක්කගත මූලද්‍රව්‍යයකින් හෝ නිශ්චිත අගයකින් සමත් විය හැකි නම්‍යශීලී වේ. සමහර විට මෙය jQuery හි මීළඟ නිල නිකුතුවේ කොටසක් විය හැකිය, ඔබ සිතන්නේ කුමක්ද?

උදාහරණ භාවිතය:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

විකල්ප:

scrollTarget : අපේක්ෂිත අනුචලන පිහිටීම දැක්වෙන මූලද්‍රව්‍යයක්, නූලක් හෝ අංකයක්.

ඕෆ්සෙට් ටොප් : අනුචලන ඉලක්කයට ඉහළින් අමතර පරතරයක් අර්ථ දක්වන අංකයකි.

කාල සීමාව : සජීවිකරණය කොපමණ කාලයක් ක්‍රියාත්මක වේද යන්න තීරණය කරන නූලක් හෝ අංකයක්.

ලිහිල් කිරීම : සංක්‍රාන්තිය සඳහා භාවිතා කළ යුතු ලිහිල් කිරීමේ ශ්‍රිතය දැක්වෙන නූලක්.

සම්පුර්ණයි : සජීවිකරණය අවසන් වූ පසු ඇමතීමේ කාර්යයක්.

— තිමෝති පෙරෙස්
source

2

ක්‍රෝම් පිළිබඳ මෑත යාවත්කාලීන කිරීමක් තෙක් එය ක්‍රියාත්මක විය. මම දැනට memoryboxweddings.com/photography-posts හි භාවිතා කරන අනුවාදයක් මා සතුව ඇත (ඔබට එය අත්හදා බැලීමට අවශ්‍ය නම්). එය යාවත්කාලීන වූ පසු මම යාවත්කාලයක් පළ කරමි.

— තිමෝති පෙරෙස්

ස්ථාවර, එය සැබවින්ම jquery.com වෙතින් JS ගොනුවක් වූ අතර එය මරා දැමීය. ඔබ එය උත්සාහ කරන්නේ නම් දැන් වැඩ කළ යුතුය.

— තිමෝති පෙරෙස්

4

Im තිමෝතිපෙරෙස්: වාණිජමය භාවිතය සඳහා අවසර ලත් යමක් එයින් අදහස් කරන බව මට විශ්වාසද? ඔවුන්ගේ වෙබ් අඩවි වල ඕනෑම තැනක එම කේත ස්නිපටය භාවිතා කිරීමට කැමති බොහෝ දෙනෙක් සිටින බව මට විශ්වාසයි. එමගින් රාත්‍රියේදී ටිකක් නිදා ගැනීමට ඔවුන්ට හැකි වේවිද? සමහර විට MIT බලපත්‍රය වැනි දෙයක් ඔබගේ අවශ්‍යතාවන්ට ගැලපේද? en.wikipedia.org/wiki/MIT_License

— රොබට් මැසෙයෝලි

13

body ('body') එෆ්එෆ් හි වැඩ නොකළ නිසා උත්සාහ කළ $ ('html, body') වැඩ කළේය.

— kiranvj

5

ඕනෑම කෙනෙකුට අවශ්ය මෙම විධානාවලිය මූලාශ්රය නම්, එසේ නම් ඔබ මෙහි එය ලබා ගත හැක flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

— Arturs

374

ඔබ සුමට අනුචලන ආචරණය ගැන එතරම් උනන්දුවක් නොදක්වන්නේ නම් සහ කිසියම් මූලද්‍රව්‍යයකට අනුචලනය කිරීමට උනන්දුවක් දක්වන්නේ නම්, මේ සඳහා ඔබට යම් jQuery ශ්‍රිතයක් අවශ්‍ය නොවේ. ජාවාස්ක්‍රිප්ට් ඔබේ නඩුව ආවරණය කර ඇත:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

එබැවින් ඔබ කළ යුත්තේ: $("selector").get(0).scrollIntoView();

.get(0) භාවිතා කරනුයේ අපට JavaScript හි DOM මූලද්‍රව්‍යය ලබා ගැනීමට අවශ්‍ය නිසා මිස JQuery හි DOM මූලද්‍රව්‍යය නොවේ.

— අතර්වා
source

13

ඔබටත් භාවිතා කළ $(selector)[0]හැකිද?

— RobW

16

RobW, ඔව් ඔබට [0] භාවිතා කළ හැකිය, නමුත් ලබා ගන්න (0) නිර්වචනය නොකළ හෝ negative ණාත්මක දර්ශක වලින් ඔබව ආරක්ෂා කරයි. මූලාශ්‍රය බලන්න: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get

— corbacho

21

ඔබට කිසිසේත් jQuery භාවිතා කිරීමට අවශ්‍ය නැතිනම් භාවිතා කරන්න document.getElementById('#elementID').scrollIntoView(). මූලද්‍රව්‍යයක් තෝරාගෙන එය සාමාන්‍ය ජාවාස්ක්‍රිප්ට් බවට පරිවර්තනය කිරීම සඳහා ~ 100k පුස්තකාලයක් පූරණය කිරීමෙන් කිසිදු ප්‍රයෝජනයක් නොමැත.

— ගේවින්

62

Av ගේවින් මට විශ්වාසයි ඔබ එසේ අදහස් කළ බව:document.getElementById('elementID').scrollIntoView()

— බ්‍රයන්

3

සිසිල්. නමුත් භාවිතා කිරීමට පෙර, බ්‍රව්සරය මේ සඳහා සහය දක්වන බවට වග බලා ගන්න. මොසිල්ලාට අනුව "මෙය පර්යේෂණාත්මක තාක්‍ෂණයකි"

— තේජාස්වි හෙග්ඩේ

48

මෙම සරල පිටපත භාවිතා කිරීම

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

යූආර්එල් හි හැෂ් ටැගයක් සොයාගත හොත්, අනුචලනය හැඳුනුම්පතට සජීවිකරණය කරන්න. හැෂ් ටැගය සොයාගත නොහැකි නම්, ස්ක්‍රිප්ට් නොසලකා හරින්න.

— යුධ මුහුණත
source

$(window.location.hash)jQuery හි රීජෙක්ස් හැඳුනුම්පත හඳුනා ගැනීමට අපොහොසත් වන හැෂ් සඳහා ක්‍රියා නොකරනු ඇත. උදාහරණයක් ලෙස, සංඛ්‍යා අඩංගු හෑෂ්. එය ද ටිකක් භයානක ය; ආදානයේ ආකෘතිය වලංගු විය යුතු බැවින් ඔබ වෙනත් අංගයක් තෝරා ගැනීම අවසන් නොකරයි.

— weltschmerz

35

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

ස්නිපටය පුළුල් කරන්න

— davidcondrey
source

1

එය වඩාත් විශ්වීය කිරීමට සහ අනවශ්‍ය ලෙස

jQuery(document).ready(function($) {   $(document).on( "click", 'a[href^="#"]', function( e ) {     e.preventDefault();     var target = this.hash,         $target = $(target);    $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000);   }); });

— හැෂ් ටැගය

31

ස්ටීව් සහ පීටර්ගේ විසඳුම ඉතා හොඳින් ක්‍රියාත්මක වේ.

නමුත් සමහර අවස්ථාවලදී, ඔබට අගය පූර්ණ සංඛ්‍යාවක් බවට පරිවර්තනය කිරීමට සිදුවනු ඇත. පුදුමයට කරුණක් නම්, ආපසු ලබා දුන් අගය $("...").offset().topසමහර විට float.
භාවිත:parseInt($("....").offset().top)

උදාහරණයක් වශයෙන්:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

— තේජාස්වි හෙග්ඩේ
source

24

මම එය කරන ආකාරය මෙයයි.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

ඕනෑම බ්‍රව්සරයක ක්‍රියා කරයි.

එය පහසුවෙන් ශ්‍රිතයකට ඔතා තැබිය හැකිය

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

මෙන්න වැඩ කරන උදාහරණයක්

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})

.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

ස්නිපටය පුළුල් කරන්න

ලියකියවිලි

— එඩ්වඩ් ඔකර්බර්ග්
source

6

ඉතා කෙටි හා පැණිරසයි. සැලකිල්ලට ගත යුතු එක් කරුණක් - අනුචලන ටොප් සැකසීමේ දී මෙන් මෙය දර්ශන පථයේ ඉහළට අනුචලනය කරනවාට වඩා එය දර්ශන තලයට (දර්ශනපත්‍රයේ පතුලේ විය හැකිය) පමණක් අනුමාන කරයි.

— OG Sean

23

JQuery නැති ක්‍රමයක් මම දනිමි:

document.getElementById("element-id").scrollIntoView();

සංස්කරණය කරන්න: දැන් අවුරුදු දෙකක් ගත වී ඇති අතර මම තවමත් අහඹු ලෙස මෙම තනතුරෙන් කීර්තියක් ලබා ගනිමි

— GameMaster1928
source

22

"සජීවිකරණය" විසඳුමේ සංයුක්ත අනුවාදය.

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

මූලික භාවිතය: $('#your_element').scrollTo();

— රෙස්ගර් කැඩ්රෝ
source

18

ඔබ ආදාන අංගයකට පමණක් අනුචලනය කරන්නේ නම්, ඔබට භාවිතා කළ හැකිය focus(). උදාහරණයක් ලෙස, ඔබට පළමු දෘශ්‍ය ආදානය වෙත අනුචලනය කිරීමට අවශ්‍ය නම්:

$(':input:visible').first().focus();

හෝ පන්තිය සහිත බහාලුමක පළමු දෘශ්‍ය ආදානය .error:

$('.error :input:visible').first().focus();

මෙය පෙන්වා දීම ගැන ට්‍රිෂියා බෝල්ට ස්තූතියි !

— බෙන්ජමින් ඕක්ස්
source

17

මෙම විසඳුම සමඟ ඔබට කිසිදු ප්ලගිනයක් අවශ්‍ය නොවන අතර ඔබේ අවසන් ටැගයට පෙර ස්ක්‍රිප්ට් තැබීම හැර වෙනත් සැකසුමක් අවශ්‍ය නොවේ</body> .

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

if ($(window.location.hash).length > 1) {
  $("html, body").animate({
    scrollTop: $(window.location.hash).offset().top
  }, 1000);
}

පැටවීමේදී, ලිපිනයේ හැෂ් එකක් තිබේ නම්, අපි එයට අනුචලනය කරමු.

තවද - ඔබ හැෂ් aසමඟ සබැඳියක් ක්ලික් කළ විට , අපි එයට අනුචලනය කරමු.href#top

— ජොනතන්
source

මෙය බොහෝ විට විය යුතු > 1වෙනුවට 0පමණින්, /#මෙම තිර රචනය බිඳ දැමීම සඳහා හේතු

— Tallboy

සබැඳි දුර්වල ලෙස ඉදිකර ඇති නමුත් TY හැර ඔබ තාක්‍ෂණිකව හිස් හැෂ් URL එකකින් අවසන් නොවිය යුතුය. (මෙම කේතයේ මගේම අනුවාදයේ මෙම පැච් එක දැනටමත් ඇතුළත් කර ඇතත්)

— ජොනතන්

මෙම කේතය හා සම්බන්ධ විහිළුවක් ඇත, කෙසේ වෙතත් එය පහසුවෙන් නිවැරදි කළ හැකිය. return false;පෙරනිමි ක්‍රියාව වැළැක්වීම සඳහා ඔබ ක්ලික් ක්ලික් සිදුවීම අවසානයේ අවශ්‍ය වේ - වහාම නැංගුරම වෙත අනුචලනය කිරීම - සිදුවීම වළක්වා ගන්න.

— roncli

2

@roncli good point - විකල්පයක් ලෙස ඔබට කළ හැකියe.preventDefault();

— ජොනතන්

e.preventDefault()කෙසේ වෙතත් ක්ලික් කිරීමේදී url හි ඇති හැෂ් යාවත්කාලීන නොකරයි, එය සැමවිටම හැෂ් රහිත URL ය

— jayasurya_j

8

බොහෝ අවස්ථාවලදී, ප්ලගිනයක් භාවිතා කිරීම වඩාත් සුදුසුය. බරපතල ලෙස. මම මෙතන මගේ පතට යන්නම් . ඇත්ත වශයෙන්ම තවත් අයද සිටිති. නමුත් කරුණාකර ඔබට මුලින්ම ප්ලගිනයක් අවශ්‍ය වන අන්තරායන් වළක්වා ගන්නේදැයි පරීක්ෂා කරන්න - ඒ සියල්ලම එසේ නොවේ.

වෙනත් තැනක ප්ලගිනයක් භාවිතා කිරීමට හේතු ගැන මම ලියා ඇත. කෙටියෙන් කිවහොත්, මෙහි බොහෝ පිළිතුරු සපයන එක් ලයිනර් ය

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

නරක UX වේ.

සජීවිකරණය පරිශීලක ක්‍රියාවන්ට ප්‍රතිචාර නොදක්වයි. පරිශීලකයා ක්ලික් කිරීම, තට්ටු කිරීම හෝ අනුචලනය කිරීමට උත්සාහ කළත් එය ක්‍රියාත්මක වේ.
සජීවිකරණයේ ආරම්භක ස්ථානය ඉලක්කගත මූලද්‍රව්‍යයට ආසන්න නම්, සජීවිකරණය වේදනාකාරී ලෙස මන්දගාමී වේ.
ඉලක්කගත අංගය පිටුවේ පතුල අසල තබා තිබේ නම්, එය කවුළුවේ ඉහළට අනුචලනය කළ නොහැක. අනුචලන සජීවිකරණය හදිසියේම නව චලනයේදී නතර වේ.

මෙම ගැටළු (සහ වෙනත් අය සමූහයක් ) හැසිරවීමට , ඔබට මගේ ප්ලගිනයක් වන jQuery.scrollable භාවිතා කළ හැකිය . එවිට ඇමතුම බවට පත්වේ

$( window ).scrollTo( targetPosition );

ඒක තමයි. ඇත්ත වශයෙන්ම, තවත් විකල්ප තිබේ.

ඉලක්කගත ස්ථානය සම්බන්ධයෙන්, $target.offset().topබොහෝ අවස්ථාවන්හිදී කාර්යය ඉටු කරයි. නමුත් ආපසු ලබා දුන් අගය htmlමූලද්‍රව්‍යයේ මායිමක් සැලකිල්ලට නොගන්නා බව කරුණාවෙන් සලකන්න ( මෙම නිරූපණය බලන්න ). ඕනෑම තත්වයක් යටතේ ඉලක්කගත ස්ථානය නිවැරදි වීමට ඔබට අවශ්‍ය නම් එය භාවිතා කිරීම වඩා හොඳය

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

htmlමූලද්රව්යයේ මායිමක් සකසා තිබුණත් එය ක්රියා කරයි .

— හැෂ්චේන්ජ්
source

8

සජීවිකරණ:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});

8

පිටාර ගලන බහාලුමක් තුළට අනුචලනය කිරීමට ඔබට අවශ්‍ය නම් ( $('html, body')ඉහත පිළිතුරු වෙනුවට ), නිරපේක්ෂ ස්ථානගත කිරීම සමඟ වැඩ කිරීම, මෙය කළ යුතු ආකාරයයි:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

— ෆජීර්
source

7

Div හැඳුනුම්පත ඉලක්ක කර ගැනීම සඳහා පිටුවේ අනුචලනය සාක්ෂාත් කර ගැනීමට පහසුම ක්‍රමය

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

— ඉර්ෂාඩ් ඛාන්
source

6

සාමාන්‍ය පන්ති තේරීම් කාරකයක් භාවිතා කරමින් හැඳුනුම්පත සහ හර්ෆ් සාරාංශ ගත කිරීම මගේ ප්‍රවේශයයි

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});

<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>

ස්නිපටය පුළුල් කරන්න

— vascogaspar
source

6

අභිරුචි jQuery ප්ලගිනය භාවිතා කිරීම ඉතා සරල හා පහසුය. ගුණාංගය එක් කරන්නscroll=ඔබගේ ක්ලික් කළ හැකි මූලද්‍රව්‍යයට කර එහි අගය ඔබට අනුචලනය කිරීමට අවශ්‍ය තේරීම් කාරකයට සකසන්න.

එසේ : <a scroll="#product">Click me</a>. එය ඕනෑම මූලද්රව්යයක් මත භාවිතා කළ හැකිය.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>

— DevWL
source

4

var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};

— kayz1
source

4

$('html, body').animate(...) අයිෆෝන්, ඇන්ඩ්‍රොයිඩ් ක්‍රෝම් සෆාරි බ්‍රව්සරයේ මා සඳහා නොවේ.

මට පිටුවේ මූල අන්තර්ගත අංග ඉලක්ක කිරීමට සිදු විය.

$ ('# cotnent') සජීවිකරණය (...)

මෙන්න මම අවසන් කළ දේ

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

සියලුම ශරීර අන්තර්ගතයන් # අන්තර්ගත බෙදීමක් සමඟ රැහැන්ගත කර ඇත

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>

— ෂාදත්
source

ඔබ සැබවින්ම පරිශීලක නියෝජිත ස්නයිෆින් භාවිතා නොකළ යුතුය. webaim.org/blog/user-agent-string-history

— ඇලෙක්ස් පොඩ්වර්නි

වචන බිඳීම එකතු කරන්න: බිඳීම-සියල්ල; කරදරයේ සිටින ඔබේ CSS අංගයට. Android / iOS වෙබ් දසුන jQuery.animate ({scrollTop: y}) පිහිටීම වැරදිය. medium.com/@ellery.leung/…

— daliaessam

4

මෙය අතර්වාගේ පිළිතුර: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . ඔබගේ ලේඛනය iframe එකක තිබේ නම් එකතු කිරීමට අවශ්‍ය නම්, ඔබට බැලීමට අනුචලනය කිරීමට මව් රාමුවේ අංගයක් තෝරා ගත හැකිය:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();

— cynya
source

3

$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);

3

පරිශීලකයා # ආදානය සමඟ එම ආදානය මත ක්ලික් කළ විට, පිටුව හොඳ සජීවිකරණයක් සමඟ පිටුවේ අවසාන අංගයට අනුචලනය කළ යුතුය. එය ඉහළට නොව පහළට පහළට අනුචලනය විය යුතුය.

පිටුවේ අවසාන අයිතමය # ඉදිරිපත් කිරීම සමඟ ඉදිරිපත් කිරීමේ බොත්තමකි

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

මෙය මුලින් පහළට අනුචලනය කර #submitපසුව ක්ලික් කළ ආදානය වෙත කර්සරය නැවත ලබා දෙනු ඇත, එය අනුචලනය පහළට අනුකරණය කරන අතර බොහෝ බ්‍රව්සර් වල ක්‍රියා කරයි. එය පිරිසිදු ජාවාස්ක්‍රිප්ට් වලින් ලිවිය හැකි බැවින් එයට jQuery අවශ්‍ය නොවේ.

focusක්‍රියාකාරීත්වය භාවිතා කිරීමේ මෙම විලාසිතාවට දම්වැල් focusඇමතුම් හරහා වඩා හොඳ ආකාරයකින් සජීවිකරණය අනුකරණය කළ හැකිද? මම මෙම න්‍යාය අත්හදා බලා නැත, නමුත් එය මේ වගේ දෙයක් වනු ඇත:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

— කලීඩ් කේ
source

3

මම මොඩියුල අනුචලන අංගයක් සකස් කළෙමි npm install scroll-element. එය මේ ආකාරයට ක්‍රියා කරයි:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

පහත දැක්වෙන SO තනතුරු වල සහාය ඇතිව ලියා ඇත:

මෙන්න කේතය:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}

— svnm
source

2

සම්පූර්ණ අංගය පෙන්වීමට (වත්මන් කවුළු ප්‍රමාණයෙන් එය කළ හැකි නම්):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

— රෝමානු ෂම්රිට්ස්කි
source

2

මම පොදු අරමුණු ශ්‍රිතයක් ලිවූ අතර එය jQuery වස්තුවකට, CSS තේරීම් කාරකයකට හෝ සංඛ්‍යාත්මක අගයකට අනුචලනය වේ.

උදාහරණ භාවිතය:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

ශ්‍රිතයේ කේතය:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

— ඉසපිර්
source

2

එය වටින දෙය සඳහා, අනුචලනය සහිත ඩීඅයිවී එකක් තුළ තිබිය හැකි සාමාන්‍ය අංගයක් සඳහා එවැනි හැසිරීමක් ලබා ගැනීමට මට හැකි වූයේ මේ ආකාරයට ය. අපගේ නඩුවේදී අපි සම්පූර්ණ ශරීරය අනුචලනය නොකරමු, නමුත් පිටාර ගැලීම් සහිත විශේෂිත අංග: ස්වයංක්‍රීය; විශාල පිරිසැලසුමක් තුළ.

එය ඉලක්කගත මූලද්‍රව්‍යයේ උසෙහි ව්‍යාජ ආදානයක් නිර්මාණය කරයි, පසුව ඒ කෙරෙහි අවධානය යොමු කරයි, ඔබ අනුචලනය කළ හැකි ධූරාවලිය තුළ කෙතරම් ගැඹුරින් සිටියත් බ්‍රව්සරය සෙසු දේ ගැන සැලකිලිමත් වනු ඇත. චාම් එකක් වගේ වැඩ කරනවා.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

— මාටින්_කෙන්ටිකෝ
source

2

මෙය මට ප්‍රයෝජනවත් විය:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);

— පොලාරිස්
source

2

jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>

ස්නිපටය පුළුල් කරන්න

— මින්ගුකෝඩ්
source

2

ONELINER

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

කේත ස්නිපටය පෙන්වන්න

subject.onclick = e=> window.scroll({top: submit.offsetTop, behavior: 'smooth'});

.box,.foot{display: flex;background:#fdf;padding:500px 0} .foot{padding:250px}

<input type="text" class="textfield" value="click here" id="subject" name="subject">

<div class="box">
  Some content
  <textarea></textarea>
</div>

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

<div class="foot">Some footer</div>

ස්නිපටය පුළුල් කරන්න

— කමිල් කීච්ව්ස්කි
source

1

2019 වන විට යාවත්කාලීන කළ පිළිතුර:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');

— stardust4891
source

ශරීරය සඳහා ඔබ මෙම තේරීම කළ යුතුය: [document.documentElement, document.body] සහ සමීකරණයේදී ශරීර ඕෆ්සෙට් අවශ්‍ය නොවේ. $ ('# විෂය'). ඕෆ්සෙට් (). ඉහළට ප්‍රමාණවත්.

— ali6p