Próbuję przenieść stronę do <div>
elementu.
Próbowałem następnego kodu bez skutku:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
Próbuję przenieść stronę do <div>
elementu.
Próbowałem następnego kodu bez skutku:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
Odpowiedzi:
Możesz użyć kotwicy, aby „skupić” element div. To znaczy:
<div id="myDiv"></div>
a następnie użyj następującego javascript:
// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";
location.href="#";location.href="#myDiv"
. Używanie id="myDiv"
jest preferowane name="myDiv"
i działa też.
scrollIntoView działa dobrze:
document.getElementById("divFirst").scrollIntoView();
pełne odniesienie w dokumentacji MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
scrollIntoView
Twoje pytanie i odpowiedzi wyglądają inaczej. Nie wiem, czy się mylę, ale dla tych, którzy szukają w Google i docierają tutaj, moja odpowiedź byłaby następująca:
Moja odpowiedź wyjaśniła:
tutaj jest prosty skrypt javascript do tego
wywołaj to, gdy chcesz przewinąć ekran do elementu, który ma id = "yourSpecificElementId"
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
to znaczy. na powyższe pytanie, jeśli intencją jest przewinięcie ekranu do div o identyfikatorze 'divFirst'
kod wyglądałby następująco: window.scroll(0,findPos(document.getElementById("divFirst")));
i potrzebujesz tej funkcji do pracy:
//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];
}
}
ekran zostanie przewinięty do konkretnego elementu.
window
chcesz przewijać, a nie przepełniony obszar wyświetlania
[curtop]
, aby curtop
na koniec
(window.screen.height/2)
od findPos
Trochę się temu przyglądałem i znalazłem ten, który wydaje się być najbardziej naturalnym sposobem na zrobienie tego. Oczywiście jest to teraz mój ulubiony zwój. :)
const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
Pamiętaj, że window.scroll({ ...options })
nie jest obsługiwane w przeglądarkach IE, Edge i Safari. W takim przypadku najlepiej jest użyć
element.scrollIntoView()
. (Obsługiwane w IE 6). Najprawdopodobniej możesz (czytaj: nieprzetestowane) przekazać opcje bez żadnych skutków ubocznych.
Można je oczywiście opakować w funkcję, która zachowuje się w zależności od używanej przeglądarki.
window.scroll
Spróbuj tego:
var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible';
divFirst.style.display = 'block';
divFirst.tabIndex = "-1";
divFirst.focus();
np. @:
element.tabIndex
ale nie element.tabindex
; druga działa na Firefoksie, ale nie na Chrome (przynajmniej kiedy próbowałem go jakiś czas temu). Oczywiście, używany jako atrybut HTML tabIndex
i tabindex
działa (i na XHTML, tabindex
musi być używany)
Aby przewinąć do danego elementu, po prostu zrobiłem to rozwiązanie tylko javascript poniżej.
Proste użycie:
EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);
Obiekt silnika (możesz bawić się filtrem, wartościami 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);
}
};
Oto funkcja, która może zawierać opcjonalne przesunięcie dla tych stałych nagłówków. Żadne zewnętrzne biblioteki nie są potrzebne.
function scrollIntoView(selector, offset = 0) {
window.scroll(0, document.querySelector(selector).offsetTop - offset);
}
Możesz pobrać wysokość elementu za pomocą JQuery i przewinąć do niego.
var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)
Aktualizacja marzec 2018
Przewiń do tej odpowiedzi bez używania JQuery
scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)
Możesz ustawić fokus na element. Działa lepiej niżscrollIntoView
node.setAttribute('tabindex', '-1')
node.focus()
node.removeAttribute('tabindex')
Najlepsza, najkrótsza odpowiedź, że to, co działa nawet z efektami animacji:
var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});
Jeśli masz stały pasek nawigacji, po prostu odejmij jego wysokość od górnej wartości, więc jeśli stała wysokość paska wynosi 70 pikseli, linia 2 będzie wyglądać następująco:
window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});
Objaśnienie:
Linia 1 pobiera pozycję elementu Linia 2 przewija do pozycji elementu; behavior
właściwość dodaje płynny efekt animacji
Myślę, że jeśli dodasz tabindex do swojego div, będzie on mógł uzyskać fokus:
<div class="divFirst" tabindex="-1">
</div>
Nie sądzę jednak, że jest to poprawne, tabindex można zastosować tylko do obszaru, przycisku, wejścia, obiektu, zaznaczenia i obszaru tekstu. Ale spróbuj.
tabindex
jest to „podstawowy atrybut”, czyli „atrybuty globalne” (atrybuty, które są wspólne dla wszystkich elementów w języku HTML). Zobacz w3.org/TR/2011/WD-html-markup-20110113/global-attributes.html
Podobne do rozwiązania @ caveman
const element = document.getElementById('theelementsid');
if (element) {
window.scroll({
top: element.scrollTop,
behavior: 'smooth',
})
}
Nie możesz skupić się na div. Możesz skupić się tylko na elemencie wejściowym w tym div. Ponadto musisz użyć element.focus () zamiast display ()
<div>
ustawić fokus, używając tabindex
atrybutu. Zobacz dev.w3.org/html5/spec-author-view/editing.html#attr-tabindex
Po długim rozglądaniu się, to w końcu zadziałało:
Znajdź / zlokalizuj div w swojej domenie, który ma pasek przewijania. Dla mnie wyglądało to tak: "div class =" table_body table_body_div "scroll_top =" 0 "scroll_left =" 0 "style =" width: 1263px; wysokość: 499px; "
Zlokalizowałem to za pomocą tej ścieżki xpath: // div [@ class = 'table_body table_body_div']
Użył JavaScript do wykonania przewijania w następujący sposób: (JavascriptExecutor) sterownik) .executeScript ("arguments [0] .scrollLeft = arguments [1];", element, 2000);
2000 to liczba pikseli, które chciałem przewinąć w prawo. Użyj scrollTop zamiast scrollLeft, jeśli chcesz przewijać div w dół.
Uwaga: próbowałem użyć scrollIntoView, ale nie działało to poprawnie, ponieważ moja strona internetowa zawierała wiele elementów div. Będzie działać, jeśli masz tylko jedno główne okno, w którym znajduje się fokus. To najlepsze rozwiązanie, z jakim się spotkałem, jeśli nie chcesz używać jQuery, czego ja nie chciałem.
Metoda, której często używam do przewijania kontenera do jego zawartości.
/**
@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');
}
};
jeśli chcesz nadpisać globalnie, możesz również zrobić:
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');
}
};
Ze względu na zachowanie "płynne" nie działa w Safari, Safari ios, Explorer. Zwykle piszę prostą funkcję wykorzystującą 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)
})
}
})();
spróbuj tej funkcji
function navigate(divId) {
$j('html, body').animate({ scrollTop: $j("#"+divId).offset().top }, 1500);
}
Przekaż id div jako parametr, który zadziała. Już go używam
$j
?
visibility
idisplay
służą do uwidocznienia elementów (nie). Czy chcesz przewinąć element DIV na ekranie?