Bagaimana cara saya menggulir ke suatu elemen menggunakan JavaScript?

Saya mencoba untuk memindahkan halaman ke suatu <div>elemen.

Saya telah mencoba kode berikutnya tetapi tidak berhasil:

document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';

Anda dapat menggunakan jangkar untuk "memfokuskan" div. Yaitu:

<div id="myDiv"></div>

dan kemudian gunakan javascript berikut:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

scrollIntoView berfungsi dengan baik:

document.getElementById("divFirst").scrollIntoView();

referensi lengkap dalam dokumen MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

pertanyaan Anda dan jawabannya tampak berbeda. Saya tidak tahu apakah saya salah, tetapi bagi mereka yang googles dan sampai di sini jawaban saya adalah sebagai berikut:

1. Jawaban saya di stackoverflow
2. Pertanyaan serupa

Jawaban saya menjelaskan:

di sini adalah javascript sederhana untuk itu

panggil ini saat Anda perlu menggulir layar ke elemen yang memiliki id = "yourSpecificElementId"

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

yaitu. untuk pertanyaan di atas, jika tujuannya adalah menggulir layar ke div dengan id 'divFirst'

kodenya adalah: window.scroll(0,findPos(document.getElementById("divFirst")));

dan Anda memerlukan fungsi ini untuk bekerja:

//Finds y value of given object
function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

layar akan digulir ke elemen spesifik Anda.

Untuk Chrome dan Firefox

Saya telah melihat sedikit ke dalam ini dan saya menemukan ini yang entah bagaimana terasa seperti cara paling alami untuk melakukannya. Tentu saja, ini adalah gulir favorit pribadi saya sekarang. :)

const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
  top: y,
  behavior: 'smooth'
});

Untuk pendukung IE, Edge dan Safari

Catatan yang window.scroll({ ...options })tidak didukung di IE, Edge dan Safari. Dalam hal ini kemungkinan besar yang terbaik untuk digunakan element.scrollIntoView(). (Didukung pada IE 6). Anda kemungkinan besar (baca: belum diuji) opsi lewat tanpa efek samping.

Ini tentu saja dapat dibungkus dengan fungsi yang berperilaku sesuai dengan browser yang sedang digunakan.

Coba ini:

var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible'; 
divFirst.style.display = 'block';  
divFirst.tabIndex = "-1";  
divFirst.focus();

misalnya @:

http://jsfiddle.net/Vgrey/

Untuk menggulir ke elemen yang diberikan, buat saja solusi javascript ini di bawah ini.

Penggunaan sederhana:

EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);

Objek mesin (Anda dapat mengutak-atik filter, nilai fps):

/**
 *
 * Created by Borbás Geri on 12/17/13
 * Copyright (c) 2013 eppz! development, LLC.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */


var EPPZScrollTo =
{
    /**
     * Helpers.
     */
    documentVerticalScrollPosition: function()
    {
        if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
        if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode).
        if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8.
        return 0; // None of the above.
    },

    viewportHeight: function()
    { return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },

    documentHeight: function()
    { return (document.height !== undefined) ? document.height : document.body.offsetHeight; },

    documentMaximumScrollPosition: function()
    { return this.documentHeight() - this.viewportHeight(); },

    elementVerticalClientPositionById: function(id)
    {
        var element = document.getElementById(id);
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },

    /**
     * Animation tick.
     */
    scrollVerticalTickToPosition: function(currentPosition, targetPosition)
    {
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);

        // Snap, then stop if arrived.
        var arrived = (Math.abs(difference) <= 0.5);
        if (arrived)
        {
            // Apply target.
            scrollTo(0.0, targetPosition);
            return;
        }

        // Filtered position.
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);

        // Apply target.
        scrollTo(0.0, Math.round(currentPosition));

        // Schedule next tick.
        setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
    },

    /**
     * For public use.
     *
     * @param id The id of the element to scroll to.
     * @param padding Top padding to apply above element.
     */
    scrollVerticalToElementById: function(id, padding)
    {
        var element = document.getElementById(id);
        if (element == null)
        {
            console.warn('Cannot find element with id \''+id+'\'.');
            return;
        }

        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
        var currentPosition = this.documentVerticalScrollPosition();

        // Clamp.
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;

        // Start animation.
        this.scrollVerticalTickToPosition(currentPosition, targetPosition);
    }
};

Berikut adalah fungsi yang dapat menyertakan offset opsional untuk header tetap itu. Tidak diperlukan perpustakaan eksternal.

function scrollIntoView(selector, offset = 0) {
  window.scroll(0, document.querySelector(selector).offsetTop - offset);
}

Anda bisa mengambil ketinggian elemen menggunakan JQuery dan gulir ke sana.

var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)

Pembaruan Maret 2018

Gulir ke jawaban ini tanpa menggunakan JQuery

scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)

Anda dapat mengatur fokus ke elemen. Ini bekerja lebih baik daripadascrollIntoView

node.setAttribute('tabindex', '-1')

node.focus()

node.removeAttribute('tabindex')

Jawaban terbaik dan terpendek yang berfungsi bahkan dengan efek animasi:

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

Jika Anda memiliki bilah nav tetap, kurangi saja tingginya dari nilai teratas, jadi jika tinggi bilah tetap Anda adalah 70px, baris 2 akan terlihat seperti:

window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

Penjelasan: Baris 1 mendapatkan posisi elemen Baris 2 gulir ke posisi elemen; behaviorproperti menambahkan efek animasi yang halus

Fokus dapat ditetapkan hanya pada elemen interaktif ... Div hanya mewakili bagian logis dari halaman.

Mungkin Anda dapat mengatur batas di sekitar div atau mengubah warnanya untuk mensimulasikan fokus. Dan ya Visiblity tidak fokus.

Saya pikir jika Anda menambahkan tabindex ke div Anda, itu akan bisa mendapatkan fokus:

<div class="divFirst" tabindex="-1">
</div>

Saya tidak berpikir itu valid, tabindex hanya dapat diterapkan ke, area, tombol, input, objek, pilih, dan textarea. Tapi cobalah.

Mirip dengan solusi @ manusia gua

const element = document.getElementById('theelementsid');

if (element) {
    window.scroll({
        top: element.scrollTop,
        behavior: 'smooth',
    }) 
}

Anda tidak dapat fokus pada div. Anda hanya bisa fokus pada elemen input di div itu. Anda juga perlu menggunakan element.focus () alih-alih display ()

Setelah banyak melihat-lihat, inilah yang akhirnya berhasil untuk saya:

1. Temukan / temukan div di dom Anda yang memiliki bilah gulir. Bagi saya, itu tampak seperti ini: "div class =" table_body table_body_div "scroll_top =" 0 "scroll_left =" 0 "style =" width: 1263px; tinggi: 499px; "

2. Saya menemukannya dengan xpath ini: // div [@ class = 'table_body table_body_div']

3. Digunakan JavaScript untuk menjalankan pengguliran seperti ini: driver (JavascriptExecutor)) .executeScript ("argumen [0] .scrollLeft = argumen [1];", elemen, 2000);

2000 adalah jumlah piksel yang ingin saya gulir ke kanan. Gunakan scrollTop bukan scrollLeft jika Anda ingin menggulir div Anda ke bawah.

Catatan: Saya mencoba menggunakan scrollIntoView tetapi tidak berfungsi dengan baik karena halaman web saya memiliki beberapa div. Ini akan berfungsi jika Anda hanya memiliki satu jendela utama di mana fokus berada. Ini adalah solusi terbaik yang saya temui jika Anda tidak ingin menggunakan jQuery yang saya tidak mau.

Metode yang sering saya gunakan untuk menggulir wadah ke isinya.

/**
@param {HTMLElement} container : element scrolled.
@param {HTMLElement} target : element where to scroll.
@param {number} [offset] : scroll back by offset
*/
var scrollAt=function(container,target,offset){
    if(container.contains(target)){
        var ofs=[0,0];
        var tmp=target;
        while (tmp!==container) {
            ofs[0]+=tmp.offsetWidth;
            ofs[1]+=tmp.offsetHeight;
            tmp=tmp.parentNode;
        }
        container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
    }else{
        throw('scrollAt Error: target not found in container');
    }
};

jika keinginan Anda untuk menimpa secara global, Anda juga dapat melakukan:

HTMLElement.prototype.scrollAt=function(target,offset){
    if(this.contains(target)){
        var ofs=[0,0];
        var tmp=target;
        while (tmp!==this) {
            ofs[0]+=tmp.offsetWidth;
            ofs[1]+=tmp.offsetHeight;
            tmp=tmp.parentNode;
        }
        container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
    }else{
        throw('scrollAt Error: target not found in container');
    }
};

Karena perilaku "smooth" tidak berfungsi di Safari, Safari ios, Explorer. Saya biasanya menulis fungsi sederhana menggunakan requestAnimationFrame

(function(){
    var start;
    var startPos = 0;

    //Navigation scroll page to element
    function scrollTo(timestamp, targetTop){
      if(!start) start = timestamp
      var runtime = timestamp - start
      var progress = Math.min(runtime / 700, 1)

      window.scroll(0, startPos + (targetTop * progress) )

      if(progress >= 1){
        return;
      }else {
        requestAnimationFrame(function(timestamp){
            scrollTo(timestamp, targetTop)
        })
      }
   };

  navElement.addEventListener('click', function(e){

    var target = e.target  //or this 
    var targetTop = _(target).getBoundingClientRect().top
    startPos = window.scrollY

    requestAnimationFrame(function(timestamp){
        scrollTo(timestamp, targetTop)
    })
  }

})();

Jika Anda ingin menggunakan html, Anda bisa menggunakan ini:

a href="samplewebsite.com/subdivision.html#id

dan menjadikannya tautan html ke id elemen spesifik. Pada dasarnya getElementByIdversi html.

coba fungsi ini

function navigate(divId) {
$j('html, body').animate({ scrollTop: $j("#"+divId).offset().top }, 1500);
}

Lulus id id sebagai parameter itu akan berfungsi saya sudah menggunakannya