Uzun sayfayı DIV'ye kaydırmak için JavaScript

Uzun bir HTML sayfasında bir bağlantım var. divTıkladığımda, görünüme kaydırarak sayfanın başka bir kısmının pencerede görünmesini diliyorum .

EnsureVisibleDiğer dillerdeki gibi biraz .

Ben teslim ettik scrollTopve scrollToancak kırmızı ringa balığı gibi görünüyor.

Biri yardım edebilir mi?

eski soru, ancak birisi bunu google aracılığıyla bulursa (benim yaptığım gibi) ve kim çapa veya jquery kullanmak istemezse; bir öğeye 'atlamak' için yerleşik bir javascript işlevi vardır;

document.getElementById('youridhere').scrollIntoView();

ve daha da iyisi; tuhaf moddaki harika uyumluluk tablolarına göre, bu tüm büyük tarayıcılar tarafından desteklenmektedir !

Fazladan bir uzantı eklemek istemiyorsanız, aşağıdaki kod jQuery ile çalışmalıdır.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

JQuery ScrollTo'ya ne dersiniz - bu örnek koda bakın

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Süslü kaydırma yok ama sizi oraya götürmeli.

Kaydırmanın zorluğu, bir div'i göstermek için yalnızca sayfayı kaydırmanız gerekmeyebilir, aynı zamanda herhangi bir seviyede kaydırılabilir div'lerin içinde de kaydırmanız gerekebilir.

ScrollTop özelliği, belge gövdesi dahil tüm DOM öğelerinde kullanılabilir. Bunu ayarlayarak, bir şeyin ne kadar aşağı kaydırılacağını kontrol edebilirsiniz. Ne kadar kaydırmanın gerekli olduğunu görmek için clientHeight ve scrollHeight özelliklerini de kullanabilirsiniz (clientHeight (viewport) scrollHeight'tan (içeriğin yüksekliği) az olduğunda kaydırma yapmak mümkündür.

Bir öğenin kapta nerede bulunduğunu bulmak için offsetTop özelliğini de kullanabilirsiniz.

Sıfırdan gerçekten genel amaçlı bir "görünüme kaydır" rutini oluşturmak için, açığa çıkarmak istediğiniz düğümden başlamanız, üst öğesinin görünür kısmında olduğundan emin olmanız ve ardından aynısını ebeveyn için tekrarlamanız gerekir. zirveye ulaşana kadar yol.

Bunun bir adımı şuna benzer (test edilmemiş kod, uç durumları kontrol etmek değil):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Sen kullanabilirsiniz Element.scrollIntoView()yukarıda belirtildiği gibi bir yöntem. İçinde hiçbir parametre olmadan bırakırsanız, anında çirkin bir kaydırmaya sahip olacaksınız . Bunu önlemek için bu parametreyi ekleyebilirsiniz - behavior:"smooth".

Misal:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Sadece değiştirmek scroll-here-plzsenin ile divbir web sitesinde veya eleman. Öğenizi pencerenizin altında görürseniz veya konum beklediğiniz gibi değilse, parametre ile oynayın block: "". Sen kullanabilir block: "start", block: "end"ya da block: "center".

Unutmayın: Her zaman bir nesnenin içindeki parametreleri kullanın {}.

Hala sorun yaşıyorsanız, https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView adresine gidin.

Bu yöntem için ayrıntılı dokümantasyon var.

Bu benim için çalıştı

document.getElementById('divElem').scrollIntoView();

Burada yayınlanan cevap - probleminize aynı çözüm.

Düzenleme: Sorunsuz bir kaydırma istiyorsanız JQuery yanıtı çok güzel - Bunu daha önce çalışırken görmemiştim.

Neden adlandırılmış bir çapa değil?

İhtiyacınız olan özellik location.hash. Örneğin:

location.hash = 'top'; // adlandırılmış bağlantıya atlar

Güzel kaydırma animasyonunu dojo veya bunun gibi bir araç takımı kullanmadan nasıl yapacağımı bilmiyorum, ancak sadece bir çapaya atlamak istiyorsanız, location.hash bunu yapmalı.

(FF3 ve Safari 3.1.2'de test edilmiştir)

Futtta'nın yukarıdaki yanıtına bir yorum ekleyemiyorum, ancak daha düzgün bir kaydırma kullanımı için:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

scrollTop (IIRC), belgede sayfanın üst kısmının kaydırıldığı yerdir. Kaydırma Sayfanın üst kısmı belirttiğiniz yerde olacak şekilde sayfayı kaydırmak için.

Burada ihtiyacınız olan şey, bazı Javascript ile değiştirilmiş stillerdir. Diyelim ki div ekran dışı ve sağdan içeri kaydırın div'in left niteliğini sayfanın genişliğine ayarlayıp ardından istediğiniz yere gelene kadar her birkaç saniyede bir belirli bir miktarda azaltacaksınız.

Bu sizi doğru yöne yönlendirmelidir.

Ek: Üzgünüm, bir yerden (bu sitenin bazen yaptığı gibi) ayrı bir div istediğinizi ve tüm sayfayı bir bölüme taşımadığınızı düşündüm. Çapaların doğru kullanımı bu etkiyi sağlar.

Bir DOM öğesine kaydırmanın genel durumu için bir jQuery eklentisi var , ancak performans bir sorunsa (ve ne zaman değil?), Bunu manuel olarak yapmanızı öneririm. Bu, iki adımı içerir:

1. Kaydırdığınız öğenin konumunu bulmak.
2. O konuma kaydırılıyor.

quirksmode , öncekinin arkasındaki mekanizmanın iyi bir açıklamasını verir. İşte benim tercih ettiğim çözüm:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Null'dan 0'a çevirmeyi kullanıyor, bu bazı çevrelerde uygun görgü kuralları değil, ama hoşuma gitti :) İkinci kısım kullanıyor window.scroll. Yani çözümün geri kalanı:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

Şahsen Josh'un jQuery tabanlı cevabını gördüğüm en iyi cevap olarak buldum ve uygulamam için mükemmel bir şekilde çalıştım ... tabii ki zaten jQuery kullanıyordum ... kesinlikle bunun için tüm jQ kitaplığını dahil etmezdim bir amaç.

Şerefe!

DÜZENLEME: Tamam ... Bunu gönderdikten sadece birkaç saniye sonra, benimkinin hemen altında başka bir cevap gördüm (bir düzenlemeden sonra hala altımda olup olmadığından emin değilim) şunu kullanmamı söyledi:

document.getElementById ('your_element_ID_here'). scrollIntoView ();

Bu, mükemmel ve jQuery sürümünden çok daha az kodla çalışır! JS'de .scrollIntoView () adında yerleşik bir işlev olduğu hakkında hiçbir fikrim yoktu, ama işte orada! Öyleyse, süslü animasyonu istiyorsanız, jQuery'ye gidin. Çabuk ve kirli ... bunu kullan!

Sorunsuz kaydırma için bu kod kullanışlıdır

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

Yanılıyorsam düzeltin ama soruyu tekrar tekrar okuyorum ve hala Angus McCoteup'un bir unsuru pozisyona nasıl ayarlayacağını sorduğunu düşünüyorum: sabit.

Angus McCoteup, http://www.cssplay.co.uk/layouts/fixed.html adresini ziyaret edin - DIV'nizin orada bir menü gibi davranmasını istiyorsanız, oradaki bir CSS'ye bakın