Я пытаюсь переместить страницу в элемент <div>.
Я пробовал следующий код безрезультатно:
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
Как перейти к элементу с помощью JavaScript?
Ответ 1
Вы можете использовать привязку для "фокусировки" div. То есть:
<div id="myDiv"></div>
а затем используйте следующий javascript:
// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";
Ответ 2
scrollIntoView работает хорошо:
document.getElementById("divFirst").scrollIntoView();
полная ссылка в документах MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
Ответ 3
ваш вопрос и ответы выглядят иначе. Я не знаю, ошибаюсь ли я, но для тех, кто googles и достигает здесь, мой ответ будет следующим:
Ответ на мой вопрос:
вот простой javascript для этого
вызовите это, когда вам нужно прокрутить экран до элемента с id = "yourSpecificElementId"
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
т. для вышеупомянутого вопроса, если намерение состоит в том, чтобы прокрутить экран до div с id 'divFirst'
код будет выглядеть следующим образом: window.scroll(0,findPos(document.getElementById("divFirst")));
и вам нужна эта функция для работы:
//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];
}
}
экран будет прокручиваться до вашего конкретного элемента.
Ответ 4
Для Chrome и Firefox
Я немного разбирался в этом, и я понял, какой-то самый естественный способ сделать это. Конечно, сейчас это мой личный любимый свиток. :)
const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
Для сторонников IE, Edge и Safari
Обратите внимание, что это не поддерживается в window.scroll({ ...options }), не поддерживается в IE, Edge и Safari. В этом случае, скорее всего, лучше всего использовать
element.scrollIntoView(). (Поддерживается в IE 6). Скорее всего, вы можете (читай: не проверено) передавать параметры без каких-либо побочных эффектов.
Они, конечно, могут быть заключены в функцию, которая ведет себя в соответствии с тем, какой браузер используется.
Ответ 5
Попробуйте следующее:
var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible';
divFirst.style.display = 'block';
divFirst.tabIndex = "-1";
divFirst.focus();
e.g @:
Ответ 6
Чтобы перейти к данному элементу, просто сделайте это только для javascript.
Простое использование:
EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);
Объект Engine (вы можете играть с фильтром, значения 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
Здесь функция, которая может включать необязательное смещение для этих фиксированных заголовков. Внешние библиотеки не нужны.
function scrollIntoView(selector, offset = 0) {
window.scroll(0, document.querySelector(selector).offsetTop - offset);
}
Вы можете получить высоту элемента, используя JQuery, и перейти к нему.
var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)
Обновление март 2018
Прокрутите до этого ответа, не используя JQuery
scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)
Ответ 8
Ну, я нашел эту функцию scrollToElement() из src ripple:
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);
}
Если вы предпочитаете, вот альтернатива findPos (object):
function findPos(obj) {
var curleft = 0,
curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return {
left: curleft,
top: curtop
};
}
Ответ 9
Вы можете установить фокус на элемент. Работает лучше, чем scrollIntoView
node.setAttribute('tabindex', '-1')
node.focus()
node.removeAttribute('tabindex')
Ответ 10
Фокус может быть установлен только на интерактивные элементы... Div только представляет логический раздел страницы.
Возможно, вы можете установить границы вокруг div или изменить цвет, чтобы имитировать фокус. И да Visiblity не является фокусом.
Ответ 11
Я думаю, что если вы добавите tabindex в свой div, он сможет получить фокус:
<div class="divFirst" tabindex="-1">
</div>
Я не думаю, что это действительно так, tabindex можно применять только к области, области, кнопке, вводу, объекту, выбору и текстовой области. Но попробуйте.
Ответ 12
Аналогично решению @caveman
const element = document.getElementById('theelementsid');
if (element) {
window.scroll({
top: element.scrollTop,
behavior: 'smooth',
})
}
Ответ 13
Вы не можете сфокусироваться на div. Вы можете сосредоточиться только на элементе ввода в этом div. Кроме того, вам нужно использовать element.focus() вместо display()
Ответ 14
Оглядев много, это то, что, наконец, помогло мне:
-
Найдите/найдите div в своем доме, который имеет полосу прокрутки. Для меня это выглядело так: "div class=" table_body table_body_div "scroll_top =" 0 "scroll_left =" 0 "style =" width: 1263px; height: 499px; "
-
Я нашел его с этим xpath://div [@ class= 'table_body table_body_div']
-
Используется JavaScript для выполнения прокрутки следующим образом: (JavascriptExecutor)).executeScript( "arguments [0].scrollLeft = arguments [1];", element, 2000);
2000 - это число пикселей, которые я хотел прокрутить вправо. Используйте scrollTop вместо scrollLeft, если вы хотите прокрутить свой div вниз.
Примечание. Я попытался использовать scrollIntoView, но он не работал должным образом, потому что на моей веб-странице было несколько div. Он будет работать, если у вас есть только одно главное окно, в котором сосредоточено внимание. Это лучшее решение, с которым я столкнулся, если вы не хотите использовать jQuery, который я не хотел.
Ответ 15
Можно также использовать хэш местоположения:
Добавьте идентификатор к элементу:
<div id="myElementId"></div>
И затем, используя JavaScript, измените хэш URL:
location.hash = 'myElementId';
Я видел другие решения, использующие location.href, но это кажется намного более чистым и не изменяет весь URL-адрес, только хэш.
Ответ 16
Метод, который я часто использую для прокрутки контейнера до его содержимого.
/**
@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');
}
};
если вы хотите переопределить глобально, вы также можете сделать:
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');
}
};
Ответ 17
Из-за поведения "гладкий" не работает в Safari, Safari ios, Explorer. Я обычно пишу простую функцию, используя 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)
})
}
})();
Ответ 18
Лучший, самый короткий ответ, который работает даже с анимационными эффектами:
var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});
Если у вас есть фиксированная панель навигации, просто вычтите ее высоту из верхнего значения, поэтому, если ваша фиксированная высота панели равна 70px, строка 2 будет выглядеть следующим образом:
window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});
Объяснение:
Строка 1 получает позицию элемента
Строка 2 прокрутите до позиции элемента; Свойство behavior добавляет плавный анимированный эффект
Ответ 19
Если вы хотите использовать html, вы можете просто использовать это:
a href="samplewebsite.com/subdivision.html#id
и сделайте ссылку html на конкретный идентификатор элемента. Его основная версия getElementById html.
Ответ 20
попробуйте эту функцию
function navigate(divId) {
$j('html, body').animate({ scrollTop: $j("#"+divId).offset().top }, 1500);
}
Передайте div id как параметр, который он будет работать Я использую его уже