如何使用JavaScript滚动到一个元素？

我正在尝试将页面移动到<div>元素。

我已经尝试了下一个代码无济于事：

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

Answer 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"; 

Answer 2

你的问题和答案看起来不一样。 我不知道自己是否弄错了，但对于那些Google来到这里的人，我的回答是：

1. 我的答案在stackoverflow
2. 类似的问题

我的答案解释：

这里是一个简单的JavaScript的

当你需要将屏幕滚动到id =“yourSpecificElementId”的元素时调用它

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

即。 对于上述问题，如果意图是将屏幕滚动到ID为“divFirst”的div，

代码将是： window.scroll(0,findPos(document.getElementById("divFirst")));

你需要这个工作的function：

 //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]; } } 

屏幕将滚动到您的特定元素。

Answer 3

scrollIntoView运作良好：

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

MDN文档中的完整参考：
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Answer 4

尝试这个：

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

例如@：

http://jsfiddle.net/Vgrey/

Answer 5

滚动到给定的元素，只是在下面的这个唯一的解决scheme。

简单的用法：

 EPPZScrollTo.scrollVerticalToElementById('signup_form', 20); 

引擎对象（你可以摆弄filter，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); } }; 

Answer 6

那么，我从ripple的src中find了这个scrollToElement（）函数：

 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（对象）的select：

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

Answer 7

焦点只能在交互元素上设置… Div只表示页面的逻辑部分。

也许你可以设置div的边框或改变它的颜色来模拟焦点。 而且Visiblity不是重点。

Answer 8

我认为，如果你添加一个tabindex到你的div，它将能够获得焦点：

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

我不认为它是有效的，但tabindex只能应用于a，区域，button，input，对象，select和textarea。 但试试看。

Answer 9

你不能专注于一个div。 您只能关注该div中的input元素。 另外，你需要使用element.focus（）而不是display（）

Answer 10

看了很多，这是最后为我工作的：

1. find/find你的dom中的div有滚动条。 对我来说，它看起来像这样：“div class =”table_body table_body_div“scroll_top =”0“scroll_left =”0“style =”width：1263px; 身高：499px;“

2. 我find了这个xpath：// div [@ class ='table_body table_body_div']

3. 使用JavaScript来执行滚动，如下所示：（JavascriptExecutor）驱动程序）.executeScript（“arguments [0] .scrollLeft = arguments [1];”，element，2000）;

2000是我想向右滚动的像素的数量。 如果您想要向下滚动div，请使用scrollTop而不是scrollLeft。

注：我尝试使用scrollIntoView，但它不能正常工作，因为我的网页有多个div。 如果您只有一个重点在哪里的主窗口，它将起作用。 这是我遇到的最好的解决scheme，如果你不想使用我不想要的jQuery。

Answer 11

也可以使用位置哈希值：

为您的元素添加一个ID：

 <div id="myElementId"></div> 

然后，使用JavaScript更改url哈希值：

 location.hash = 'myElementId'; 

我看到其他的解决scheme，使用location.href，但这似乎更干净，不会改变整个url，只有散列。

Answer 12

这里有一个函数可以包含这些固定头文件的偏移量。 不需要外部库。

 function scrollIntoView(selector, offset) { window.scroll(0, document.querySelector(selector).offsetTop - offset); } var headerHeight = $('.navbar-fixed-top').height(); scrollIntoView('#some-element', headerHeight) 

Answer 13

如果你想使用HTML，你可以使用这个：

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

并使其成为特定元素ID的HTML链接。 它基本上是getElementById html版本。

Answer 14

试试这个function

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

通过div id作为参数，它将工作我已经使用它