jQuery öğeye kaydırma

2324

Bu inputeleman var:

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

Sonra diğer metin girişleri, textareas vb.Gibi başka öğelerim var.

O tıkladığında zaman inputile #subject, sayfa güzel animasyon ile sayfanın son öğeye ilerleyin gerekir. Bu, aşağı değil yukarı doğru kaydırma olmalıdır.

Sayfanın son öğesi aşağıdakileri içeren bir submitdüğmedir #submit:

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

Animasyon çok hızlı olmamalı ve akıcı olmalıdır.

En son jQuery sürümünü çalıştırıyorum. Herhangi bir eklenti yüklemeyi değil, bunu başarmak için varsayılan jQuery özelliklerini kullanmayı tercih ederim.

javascript  jquery  scroll 
— DiegoP.
kaynak
3
— Christophe Roussy
scrollTokrom eklentisi nedeniyle benim için devre dışı bırakıldı, hangisi olduğundan emin değilim.
— Jacksonkr

Yanıtlar:

4020

Kimliğine sahip bir düğmeniz olduğunu varsayarsak button, bu örneği deneyin:

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

Makaleden kodu aldım Sorunsuz bir jQuery eklentisi olmayan bir öğeye kaydırın . 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>
Snippet'i genişlet

— Steve
kaynak
24
Bu her durumda çalışmaz. Bkz. Stackoverflow.com/questions/2905867/…
— Jānis Elmeris
7
@BarryChapman tam olarak değil. Googling sonra buldum bu tarayıcı tipine göre ekstra mantığı olması istemiyorsanız iki etiketi ihtiyaç vardır, bu yüzden.
— s3m3n
73
Animasyon istemiyorsanız ve bunun yerine öğeye anında atlamak istiyorsanız, .scrollTop(…)yerine kullanın .animate({scrollTop: …}, …).
— Rory O'Kane
11
Çözümünüze ek olarak (harika çalışır), URL'ye hashtag'i ekleyen eksiksiz bir işlev ekleyebilirsiniz. Bu durumda kaydırma yapılmaz, çünkü scrollTo zaten doğru konuma kaydırılır ve bir kullanıcı URL'yi kopyalarsa otomatik olarak sayfadaki doğru yere yapışır.
— Sander
10
animasyon tamamlandığında çalıştırmak için bir geri arama kullanır ve bu çözümle geri aramanın iki kez tetiklendiğini fark ederseniz, "$ ('html, body') yerine animate (..." .animate (... "virgül iki animasyon olayı yarattı. biri html için, biri vücut için. gerçekten sadece html gövdesi için bir tane istiyorum Teşekkürler @TJ Crowder stackoverflow.com/questions/8790752/…
— BoatCode
526

jQuery .scrollTo () Yöntemi

jQuery .scrollTo (): Görünüm - Demo, API, Kaynak

Sayfa / öğe kaydırmayı daha kolay hale getirmek için bu hafif eklentiyi yazdım. Bir hedef öğeyi veya belirtilen değeri iletebileceğ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 : İstenen kaydırma konumunu gösteren bir öğe, dize veya sayı.

offsetTop : Kaydırma hedefinin üstünde ek boşluk tanımlayan bir sayı.

duration : Animasyonun ne kadar süre çalışacağını belirleyen bir dize veya sayı.

easing : Geçiş için hangi hareket hızı işlevinin kullanılacağını belirten bir dize.

complete : Animasyon tamamlandığında çağrılacak bir işlev.

— Timothy Perez
kaynak
2
Chrome'da yakın zamanda yapılan bir güncellemeye kadar çalışıyordu. Şu anda memoryboxweddings.com/photography-posts (denemek istiyorsanız) üzerinde kullandığım çalışan bir sürüm var. Düzeltildikten sonra bir güncelleme yayınlayacağım.
— Timothy Perez
Düzeltildi, aslında jquery.com'dan onu öldüren bir JS dosyası olduğu ortaya çıktı. Denerseniz şimdi çalışmalı.
— Timothy Perez
4
@TimothyPerez: Bunun ticari kullanım için izin veren bir şey anlamına geldiğinden eminim? Eminim ki bu kod pasajını web sitelerinin herhangi bir yerinde kullanmak isteyen ve geceleri biraz daha kolay uyumalarına yardımcı olacak pek çok insan var mı? Belki MIT lisansı gibi bir şey ihtiyaçlarınızı karşılayabilir? en.wikipedia.org/wiki/MIT_License
— Robert Massaioli
13
$ ('body') FF'de çalışmadı, bu yüzden işe yarayan $ ('html, body') denedi.
— kiranvj
5
Herkes bu komut dosyası kaynağına ihtiyaç duyarsa
— Arturs
370

Düzgün kaydırma efekti ile çok ilgilenmiyorsanız ve sadece belirli bir öğeye kaydırmakla ilgileniyorsanız, bunun için bazı jQuery işlevine ihtiyacınız yoktur. Javascript davanızı kapsıyor:

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

Tek yapmanız gereken: $("selector").get(0).scrollIntoView();

.get(0) JQuery'nin DOM öğesini değil, JavaScript'in DOM öğesini almak istediğimiz için kullanılır.

— Atharva
kaynak
12
Ayrıca kullanabilir misiniz $(selector)[0]?
— Rob
16
RobW, evet sadece [0] kullanabilirsiniz, ancak get (0) sizi tanımsız veya negatif dizinlere karşı korur. Kaynağa
— corbacho
21
Eğer hiç jQuery kullanmak istemiyorsanız, sadece kullanın document.getElementById('#elementID').scrollIntoView(). Bir öğeyi seçmek ve daha sonra normal JavaScript'e dönüştürmek için ~ 100k kitaplığı yüklemeye gerek yoktur.
— Gavin
62
@Gavin Eminim ki:document.getElementById('elementID').scrollIntoView()
— Brian
3
Güzel. Ancak kullanmadan önce tarayıcının bunu desteklediğinden emin olun. Mozilla'ya göre "Bu deneysel bir teknolojidir"
— Tejasvi Hegde
48

Bu basit komut dosyasını kullanma

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

URL'de bir karma etiketi bulunursa, scrollTo kimliğine animasyon uygulamak için sıralama yapar. Karma etiketi bulunmazsa, komut dosyasını yok sayın.

— Warface
kaynak
$(window.location.hash)jQuery'nin normal ifade kimliği algılamasını karşılayamayan karmalar için çalışmaz. Örneğin, sayı içeren karmalar. Aynı zamanda biraz tehlikeli; girişin biçimi doğrulanmalıdır, böylece farklı bir öğe seçemezsiniz.
— dchacke
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>
Snippet'i genişlet

— davidcondrey
kaynak
1
Daha evrensel hale getirmek ve hashtag'in tarayıcı bağlantı penceresine gereksiz yere yerleştirilmesini kaldırmak için kodu aşağıdaki gibi 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); }); });
— ayarladım
31

Steve ve Peter'ın çözümü çok iyi çalışıyor.

Ancak bazı durumlarda, değeri bir tam sayıya dönüştürmeniz gerekebilir. Tuhaf bir şekilde, döndürülen değer $("...").offset().topbazen içinde float.
kullanın:parseInt($("....").offset().top)

Örneğin:

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

"Animate" çözümünün kompakt bir versiyonu.

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

— Rezgar Cadro
kaynak
21

Ben böyle yapıyorum.

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

Herhangi bir tarayıcıda çalışır.

Kolayca bir fonksiyona 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>
Snippet'i genişlet

Dokümanlar

— Edvard Åkerberg
kaynak
6
Oldukça kısa ve tatlı. Unutulmaması gereken bir şey - bence bu, scrollTop ayarının yaptığı gibi, görünümü görünümün üst kısmına kaydırmak yerine yalnızca görünümün (görünümün alt kısmında olabilir) kaydırır.
— OG Sean
20

JQuery olmadan bir yol biliyorum:

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

Edit: İki yıl oldu ve ben hala rastgele bu yazıdan itibar alıyorum lmao

— GameMaster1928
kaynak
18

Yalnızca bir giriş öğesine kaydırmayı kullanıyorsanız, kullanabilirsiniz focus(). Örneğin, ilk görünür girişe geçmek istiyorsanız:

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

Veya sınıflı bir kaptaki ilk görünür girdi .error:

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

Bunu işaret ettiği için Tricia Ball'a teşekkürler !

— Benjamin Oakes
kaynak
17

İle bu çözümün herhangi eklentisine ihtiyacınız yoktur ve orada herhangi bir kurulum gerektirmez sizin kapanış önce komut dosyasını yerleştirerek yanında </body>etiketi.

$("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, adreste bir karma varsa, ona kaydırırız.

Ve - örneğin , karma aiçeren bir bağlantıyı her tıkladığınızda , bu sayfaya kaydırırız.href#top

— Jonathan
kaynak
Bu muhtemelen olmalıdır > 1yerine 0sırf /#kırmak için bu senaryoyu neden olur
— Tallboy
Bağlantılar kötü bir şekilde oluşturulmuş değil, TY ise teknik olarak boş bir karma URL ile sonuçlanmamalısınız. (bu kodun kendi sürümünde bu yama zaten dahil edilmiş olmasına rağmen ^^)
— Jonathan
Bu kodla ilişkili bir titreşim var, ancak kolayca düzeltilebilir. return false;Varsayılan eylemin (hemen bağlantıya kaydırılması) gerçekleşmesini önlemek için tıklama etkinliğinin sonunda yapmanız gerekir .
— roncli
2
@roncli iyi bir nokta - alternatif olarak sadece yapabilirsinize.preventDefault();
— Jonathan
e.preventDefault()Ancak, tıklamadaki
— URL'deki
8

Çoğu durumda, bir eklenti kullanmak en iyisidir. Ciddi anlamda. Ben gidiyorum buradan mayın tout . Elbette başkaları da var. Ancak, ilk etapta bir eklenti istediğiniz tuzaklardan gerçekten kaçınıp kaçınmadığını kontrol edin - hepsi değil.

Başka bir yerde bir eklenti kullanmanın nedenleri hakkında yazdım . Özetle, çoğu cevabı destekleyen tek astar burada

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

kötü UX.

  • Animasyon, kullanıcı işlemlerine yanıt vermiyor. Kullanıcı tıklasa, dokunduğunda veya kaydırmaya çalışsa bile devam eder.

  • Animasyonun başlangıç ​​noktası hedef öğeye yakınsa, animasyon acı verici bir şekilde yavaştır.

  • Hedef öğe sayfanın altına yerleştirilirse, pencerenin üstüne kaydırılamaz. Kaydırma animasyonu orta harekette aniden durur.

Bu sorunları (ve diğerlerini ) ele almak için , jQuery.scrollable eklentim kullanabilirsiniz . Sonra çağrı olur

$( window ).scrollTo( targetPosition );

ve bu kadar. Tabii ki, daha fazla seçenek var .

Hedef pozisyon ile ilgili olarak, $target.offset().topçoğu durumda iş yapar. Ancak, döndürülen değerin htmlöğede bir kenarlık dikkate almadığını lütfen unutmayın ( bu demoya bakın ). Her durumda doğru olması için hedef pozisyona ihtiyacınız varsa, kullanmak daha iyidir

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

Öğede bir kenarlık htmlayarlanmış olsa bile bu işe yarar .

— hashchange
kaynak
8

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

Bir taşma kabı içinde kaydırmak istiyorsanız ( $('html, body')yukarıda cevaplanmak yerine ), mutlak konumlandırma ile de çalışarak, bunu yapmanın yolu:

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

container.animate({
  scrollTop: pos
}
— fajir
kaynak
7

Div kimliğini hedeflemek için sayfa kaydırmayı sağlamanın kolay yolu

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

Bu benim genel bir sınıf seçici kullanarak kimlik ve href soyutlama benim yaklaşı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>
Snippet'i genişlet

— vascogaspar
kaynak
6

Çok basit ve kullanımı kolay özel jQuery eklentisi. Özelliğ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 elemanda 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>
— DevWL
kaynak
4 
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
— kayz1
kaynak
4

$('html, body').animate(...) iphone, android krom safari tarayıcısı benim için değil.

Sayfanın kök içerik öğesini hedeflemem gerekiyordu.

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

İşte sonuçta

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 içerik içeriği #content div ile bağlandı

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
— Shahdat
kaynak
Gerçekten kullanıcı ajan koklama kullanmamalısınız. webaim.org/blog/user-agent-string-history
— Alex Podworny
Sözcük sonu ekle: sonu-hepsi; sorun olan CSS öğenize. Android / iOS web görünümü jQuery.animate ({scrollTop: y}) konumu Yanlış. medium.com/@ellery.leung/…
— daliaessam
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

Kullanıcı #subject ile bu girdiyi tıkladığında, sayfanın güzel bir animasyonla sayfanın son öğesine gitmesi gerekir. Bu, aşağı değil yukarı doğru kaydırma olmalıdır.

Sayfanın son öğesi #submit içeren bir gönderme düğmesidir

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

Bu önce aşağıya #submit imleci tıklatılan girişe geri döndürmek için aşağı kaydırır, bu da aşağı kaydırmayı taklit eder ve çoğu tarayıcıda çalışır. Ayrıca saf JavaScript ile yazılabildiği için jQuery gerektirmez.

focusFonksiyonu bu şekilde kullanma , zincirleme focusçağrılarla animasyonu daha iyi bir şekilde taklit edebilir . Bu teoriyi test etmedim, ama şöyle bir şey olurdu:

<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>
— Khaled.K
kaynak
3

Bir modül kaydırma öğesi ayarladım npm install scroll-element. Şöyle ç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 yayınlarının yardımıyla 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 }
}
— svnm
kaynak
2

Tam öğeyi göstermek için (geçerli pencere boyutuyla mümkünse):

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);
— Roman Shamritskiy
kaynak
2

Bir jQuery nesnesi, bir CSS seçici veya sayısal bir değere kayan genel amaçlı bir işlev 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");

Fonksiyonun 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);
};
— isapir
kaynak
2

Değeri için, ben bir DIV içinde kaydırma ile olabilir genel bir öğe için böyle bir davranış elde etmeyi başardı. Bizim durumumuzda tüm vücudu kaydırmıyoruz, sadece taşan belirli unsurları kaydırıyoruz: auto; daha geniş bir düzen içinde.

Hedef öğenin yüksekliğinin sahte bir girdisini oluşturur ve daha sonra ona odaklanır ve kaydırılabilir hiyerarşide ne kadar derin olursanız olun, tarayıcı geri kalanı ile ilgilenir. Tıkır tıkır çalışıyor.

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

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

Bu benim için çalıştı:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
— Polaris
kaynak
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>
Snippet'i genişlet

— Minguocode
kaynak
2

Oneliner

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

Kod snippet'ini göster

— Kamil Kiełczewski
kaynak
1
mükemmel çalışıyor!
— jjoselon
1

2019 itibarıyla cevap güncellendi:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
— stardust4891
kaynak
Beden için bu seçiciyi kullanmalısınız: [document.documentElement, document.body] VE Denklemde gövde ofseti gerekmez. $ ('# Subject'). offset (). top yeterlidir.
— ali6p
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.