jQuery ├Â─čeye ilerleyin


Al─▒nan cevaba git


Bu input ├Â─čeye sahibim :

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

Sonra di─čer metin giri┼čleri, textareas vb. Gibi ba┼čka elementlerim var.

O t─▒klad─▒─č─▒nda zaman input ile #subject , sayfa g├╝zel animasyon ile sayfan─▒n son ├Â─čeye ilerleyin gerekir. Yukar─▒ya de─čil a┼ča─č─▒ya do─čru bir kayd─▒rma olmal─▒d─▒r.

Sayfan─▒n son ├Â─če bir olan submit d├╝─čme ile #submit :

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

Animasyon ├žok h─▒zl─▒ olmamal─▒ ve ak─▒┼čkan olmal─▒d─▒r.

En son jQuery s├╝r├╝m├╝n├╝ ├žal─▒┼čt─▒r─▒yorum. Herhangi bir eklenti kurmay─▒ de─čil, bunu ba┼čarmak i├žin varsay─▒lan jQuery ├Âzelliklerini kullanmay─▒ tercih ediyorum.


2171









Cevap say─▒s─▒n─▒ say: 29






Kimli─či olan bir d├╝─čmeniz oldu─čunu varsayarak button , ┼ču ├Ârne─či deneyin:

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

Makaleden kodu sorunsuzca jQuery eklentisi olmayan bir ├Â─čeye kayd─▒rd─▒m . Ve a┼ča─č─▒daki ├Ârnekte test ettim.

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


3854








jQuery .scrollTo () Y├Ântemi

jQuery .scrollTo (): G├Âr├╝n├╝m - Demo, API, Kaynak

Sayfa / ├Â─če kayd─▒rmay─▒ ├žok daha kolay hale getirmek i├žin bu hafif eklentiyi yazd─▒m. Bir hedef elemanda veya belirli bir de─čerde ge├žebilece─činiz yerde esnektir. Belki de bu, jQuery'nin bir sonraki resmi s├╝r├╝m├╝n├╝n bir par├žas─▒ olabilir, ne d├╝┼č├╝n├╝yorsunuz?


├ľrnekler Kullan─▒m─▒:

 $('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
 

Se├ženekler:

scrollTarget : ─░stedi─činiz kayd─▒rma konumunu belirten bir ├Â─če, dize veya say─▒.

offsetTop : Kayd─▒rma hedefinin ├╝zerinde ek bo┼čluk tan─▒mlayan bir say─▒.

s├╝re : Animasyonun ne kadar s├╝rece─čini belirleyen bir dize veya say─▒.

hareket h─▒z─▒ : Ge├ži┼č i├žin hangi hareket i┼člevinin kullan─▒laca─č─▒n─▒ belirten bir dize.

tamamland─▒ : Animasyon tamamland─▒─č─▒nda ├ža─čr─▒lacak bir i┼člev.


500







D├╝zg├╝n kayd─▒rma efekti ile ilgilenmiyorsan─▒z ve yaln─▒zca belirli bir ├Â─čeye kayd─▒rma yapmakla ilgileniyorsan─▒z, bunun i├žin baz─▒ jQuery i┼člevine gerek yoktur. Javascript, davan─▒z─▒ ele ald─▒:

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

Yani yapman─▒z gereken tek ┼čey: $("selector").get(0).scrollIntoView();

.get(0) JQuery'nin DOM ├Â─česini de─čil, JavaScriptÔÇÖin DOM ├Â─česini almak istedi─čimiz i├žin kullan─▒l─▒r.


341







Bu basit beti─či kullanarak

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

URL'de bir karma etiketi bulunursa, kayd─▒rma kimli─čini canland─▒rmak i├žin s─▒ralama yapar. E─čer bir karma etiketi bulunamad─▒ysa, beti─či yoksay─▒n.


44







 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> 


31







Steve ve Peter'─▒n ├ž├Âz├╝m├╝ ├žok iyi ├žal─▒┼č─▒yor.

Ancak baz─▒ durumlarda, de─čeri bir tamsay─▒ya d├Ân├╝┼čt├╝rmeniz gerekebilir. Garip bir ┼čekilde, d├Ând├╝r├╝len de─čer $("...").offset().top bazen i├žeridedir float .
kullan─▒n: parseInt($("....").offset().top)

├ľrne─čin:

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

24







"Canland─▒r─▒n" ├ž├Âz├╝m├╝n├╝n kompakt bir s├╝r├╝m├╝.

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

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

Temel kullan─▒m: $('#your_element').scrollTo();


19







Yaln─▒zca bir giri┼č ├Â─česine gitmekle ilgileniyorsan─▒z kullanabilirsiniz focus() . ├ľrne─čin, ilk g├Âr├╝nen giri┼če gitmek istiyorsan─▒z:

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

Veya s─▒n─▒f─▒ olan bir kaptaki ilk g├Âr├╝lebilir girdi .error :

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

Tricia Ball'a bunu g├Âsterdi─či i├žin te┼čekk├╝rler !


16







Bu ├ž├Âz├╝m ile herhangi bir eklentiye ihtiyac─▒n─▒z yoktur ve beti─či kapan─▒┼č </body> etiketinizden ├Ânce yerle┼čtirmenin yan─▒ s─▒ra kurulum gerekmez .

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

Y├╝kte, e─čer adreste bir karma varsa, ona ilerleriz.

Ve - ├Ârne─čin a bir href karma olan bir ba─člant─▒ya t─▒klad─▒─č─▒n─▒zda #top , buna ilerleriz.


15







JQuery olmadan bir yol biliyorum:

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

12







Ben b├Âyle yap─▒yorum.

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

Herhangi bir taray─▒c─▒da ├žal─▒┼č─▒r.

Bir fonksiyona kolayca sar─▒labilir

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

─░┼čte ├žal─▒┼čan bir ├Ârnek

 $(".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> 

Dok├╝manlar


8







├ço─ču durumda, bir eklenti kullanmak en iyisidir. Ciddi anlamda. Burada benimkine gidece─čim . Tabii ki di─čerleri de var. Fakat l├╝tfen ilk ├Ânce bir eklenti almak istedi─činiz tuzaklardan ger├žekten ka├ž─▒n─▒p ka├žmad─▒klar─▒n─▒ kontrol edin - hepsi de─čil.

Ba┼čka bir yerde bir eklenti kullanman─▒n nedenleri hakk─▒nda yazd─▒m . ├ľzetle, burada en ├žok cevab─▒ destekleyen tek astar

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

k├Ât├╝ UX.

  • Animasyon kullan─▒c─▒ eylemlerine cevap vermiyor. Kullan─▒c─▒ t─▒klad─▒─č─▒nda, t─▒klad─▒─č─▒nda veya kayd─▒rmaya ├žal─▒┼čt─▒─č─▒nda bile devam eder.

  • Animasyonun ba┼člang─▒├ž ÔÇőÔÇőnoktas─▒ hedef ├Â─čeye yak─▒nsa, animasyon ac─▒ verici bir ┼čekilde yava┼člar.

  • Hedef eleman sayfan─▒n alt─▒na yerle┼čtirilmi┼čse, pencerenin ├╝st k─▒sm─▒na kayd─▒r─▒lamaz. Kayd─▒rma animasyonu sonradan ortada durur.

Bu meseleleri ele almak (ve di─čerlerinden birka├ž─▒) i├žin , benim bir eklenti olan jQuery.scrollable'─▒ kullanabilirsiniz . ├ça─čr─▒ sonra olur

 $( window ).scrollTo( targetPosition );
 

ve bu kadar. Tabii ki daha fazla se├ženek var .

Hedef pozisyona gelince $target.offset().top , ├žo─ču durumda i┼či yapar. Ancak, iade edilen de─čerin, html ├Â─čenin s─▒n─▒r─▒n─▒ dikkate almad─▒─č─▒n─▒ l├╝tfen unutmay─▒n ( bu g├Âsterime bak─▒n ). Herhangi bir ko┼čulda do─čru olmas─▒ i├žin hedef pozisyona ihtiyac─▒n─▒z varsa, kullanmak daha iyidir.

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

html ├ľ─če ├╝zerindeki bir s─▒n─▒r ayarlanm─▒┼č olsa bile i┼če yarar .


7







Bir ta┼čma kab─▒ i├žinde kayd─▒rmak istiyorsan─▒z ( $('html, body') yukar─▒da cevaplamak yerine ), ayn─▒ zamanda mutlak konumland─▒rma ile de ├žal─▒┼čmak i├žin, ┼ču ┼čekilde yapmal─▒s─▒n─▒z:

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

container.animate({
  scrollTop: pos
}
 

6







Sayfa kayd─▒rma hedef div id hedefine ula┼čmak i├žin kolay bir yol

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

6







├ľzel jQuery eklentisi kullan─▒m─▒ ├žok basit ve kolayd─▒r. ├ľzniteli─či scroll= t─▒klanabilir ├Â─čenize ekleyin ve de─čerini, kayd─▒rmak istedi─činiz se├žiciye ayarlay─▒n.

Gibi o kadar: <a scroll="#product">Click me</a> . Herhangi bir element ├╝zerinde kullan─▒labilir.

 (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>
 

6







Bu benim genel bir s─▒n─▒f se├žiciyi kullanarak, kimlikleri ve hrefleri soyutlama yakla┼č─▒m─▒m.

 $(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> 


5







Animasyonlar:

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

5


2017-02-27





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

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

4







$('html, body').animate(...) iphone benim i├žin de─čil, android krom safari taray─▒c─▒s─▒.

Sayfan─▒n k├Âk i├žerik ├Â─česini hedeflemem gerekiyordu.

$ ( '# Cotnent'). Animate (...)

─░┼čte benim neyle sonu├žland─▒─č─▒m

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

T├╝m v├╝cut i├žeri─či #content div ile kablolu

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

4







Bu Atharva'n─▒n cevab─▒: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Belgeniz bir iframe i├žindeyse, eklemek istedi─činizde, g├Âr├╝n├╝me kayd─▒rmak i├žin ana karede bir ├Â─če se├žebilirsiniz:

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

3







 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> 


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

2


2014-02-12





Tam eleman─▒ g├Âstermek i├žin (e─čer mevcut pencere boyutu ile m├╝mk├╝n ise):

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

2







JQuery nesnesine, CSS se├žicisine veya say─▒sal bir de─čere kayan genel bir ama├ž i┼člevi yazd─▒m.

├ľrnek kullan─▒m:

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

─░┼člevin kodu:

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

2







Kullan─▒c─▒ #subject ile o giri┼či t─▒klad─▒─č─▒nda, sayfan─▒n g├╝zel bir animasyonla sayfan─▒n son ├Â─česine kayd─▒rmas─▒ gerekir. Yukar─▒ya de─čil a┼ča─č─▒ya do─čru bir kayd─▒rma olmal─▒d─▒r.

Sayfan─▒n son maddesi #submit ile g├Ânder butonudur.

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

Bu, ilk ├Ânce #submit imleci t─▒klat─▒lan giri┼če geri d├Ând├╝recek, a┼ča─č─▒ kayd─▒rmay─▒ taklit eden ve ├žo─ču taray─▒c─▒da ├žal─▒┼čan, a┼ča─č─▒ do─čru kayd─▒r─▒lacakt─▒r. Ayr─▒ca jQuery gerektirmez, ├ž├╝nk├╝ saf JavaScript ile yaz─▒labilir.

focus Fonksiyonu bu ┼čekilde kullanmak , focus ├ža─čr─▒lar─▒ zincirlemek yoluyla, animasyonu daha iyi bir ┼čekilde taklit edebilir . Bu teoriyi test etmedim, ancak ┼čuna benzer:

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

2







Buna de─čer, bu, bir DIV i├žinde kayan bir genel element i├žin b├Âyle bir davran─▒┼č─▒ nas─▒l ba┼čard─▒─č─▒m─▒ a├ž─▒klad─▒. Bizim durumumuzda t├╝m g├Âvdeyi kayd─▒rm─▒yoruz, ancak yaln─▒zca ta┼čma ├Âzel unsurlar─▒: auto; daha b├╝y├╝k bir d├╝zen i├žinde.

Hedef eleman─▒n y├╝ksekli─činin sahte bir giri┼čini olu┼čturur ve daha sonra buna odaklan─▒r ve taray─▒c─▒, kayd─▒r─▒labilir hiyerar┼či i├žinde ne kadar derin olursan─▒z olun geri kalan─▒ ile ilgilenir. ├çALI┼×IYOR bir cazibe gibi.

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

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

2







Bir mod├╝l kayd─▒rma eleman─▒ kurdum npm install scroll-element . Bu gibi ├žal─▒┼č─▒r:

 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)
 

A┼ča─č─▒daki SO yaz─▒lar─▒n─▒n yard─▒m─▒ ile yaz─▒lm─▒┼čt─▒r:

─░┼čte kod:

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

2


2016-11-23





Bu benim i├žin ├žal─▒┼čt─▒:

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

2







2019 itibariyle g├╝ncellenen cevap:

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

1



─░lgili yay─▒nlar


jQuery Sayfan─▒n en alt─▒na kayd─▒r─▒n / iframe

├çapraz taray─▒c─▒ JavaScript'i (jQuery de─čil ...) en ├╝ste kayd─▒r─▒n

jQuery Scroll Sayfan─▒n en alt─▒na

Bir div i├žindeki bir elemana nas─▒l ge├žilir?

jQuery kayd─▒rma (), kullan─▒c─▒n─▒n kayd─▒rma i┼člemini ne zaman durdurdu─čunu alg─▒lar

ReactJS bir elemana nas─▒l kayd─▒r─▒l─▒r

A├ž─▒sal 4'te t─▒klad─▒─č─▒n─▒zda ├Â─čeye ilerleyin

jQuery Div'e ilerleyin

JQuery'deki bir ├Â─čeye nas─▒l kayd─▒r─▒l─▒r?

Kullan─▒c─▒ belirli bir ├Â─čeye kayd─▒rd─▒─č─▒nda olay─▒ tetikle - jQuery ile

Etiketle ilgili di─čer sorular [javascript]


ÔÇťB├╝y├╝k OÔÇŁ yaz─▒m─▒na dair basit bir ─░ngilizce a├ž─▒klama nedir?

Bo┼č bir JavaScript nesnesini nas─▒l test ederim?

Grunt, NPM ve Bower aras─▒ndaki fark (package.json vs bower.json)

Jackson [duplicate] kullanarak JSON nesnelerindeki yeni alanlar─▒ yok sayma

Swift dilinde ├╝nlem i┼čareti ne anlama gelir?

ÔÇť─░sÔÇŁ operat├Âr├╝ tamsay─▒larla beklenmedik ┼čekilde davran─▒yor

Windows i├žin ÔÇťrm -rfÔÇŁ e┼čde─čeri mi?

ES6 WeakMapÔÇÖin as─▒l kullan─▒mlar─▒ nelerdir?

ÔÇťOptÔÇŁ ne demek (ÔÇťoptÔÇŁ dizininde oldu─ču gibi)? K─▒saltma m─▒? [kapal─▒]

Mockito: Bir metodun i├žinde yarat─▒lan bir nesnede metodun nas─▒l do─čruland─▒─č─▒n─▒