Pertanyaan Bagaimana cara saya menggulir ke elemen menggunakan JavaScript?


Saya mencoba memindahkan halaman ke a <div> elemen.

Saya telah mencoba kode berikutnya tanpa hasil:

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

74
2018-02-15 18:02


asal


Jawaban:


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

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

lalu gunakan javascript berikut:

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

81
2018-02-15 18:08



scrollIntoView berfungsi dengan baik:

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

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


103
2018-03-10 04:17



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

  1. Jawaban saya tentang stackoverflow
  2. Pertanyaan serupa

Jawaban saya menjelaskan:

di sini adalah javascript sederhana untuk itu

sebut ini ketika 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.


83
2017-08-16 11:44



Untuk menggulir ke elemen yang diberikan, cukup buat solusi javascript saja 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);
    }
};

7
2017-12-18 23:33



Coba ini:

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

mis. @:

http://jsfiddle.net/Vgrey/


6
2018-02-15 18:08



Saya telah melihat sedikit ke dalam ini dan saya menemukan yang satu 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'
});

5
2018-04-15 13:17



Yah, saya menemukan fungsi scrollToElement () dari src dari riak:

function scrollToElement(element) {
  var el = document.getElementById(element);
  var yPos = el.getClientRects()[0].top;
  var yScroll = window.scrollY;
  var interval = setInterval(function() {
    yScroll -= 10;
    window.scroll(0, yScroll);
    if (el.getClientRects()[0].top >= 0) {
      clearInterval(interval);
    }
  }, 5);
}

Jika Anda lebih suka, di sini adalah alternatif findPos (objek):

function findPos(obj) {
  var curleft = 0,
    curtop = 0;
  do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
  } while (obj = obj.offsetParent);
  return {
    left: curleft,
    top: curtop
  };
}

4
2018-02-23 15:28



Fokus hanya dapat ditetapkan 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 bukan fokus.


2
2018-02-15 18:05