JavaScript将长页面滚动到DIV
作为一个云计算领域的专家，我可以告诉您，JavaScript 是一种广泛使用的编程语言，它可以用于实现网页上的动态效果和交互功能。在这个问题中，JavaScript 可以用于将长页面滚动到指定的 DIV 元素。
要实现这个功能，可以使用 JavaScript 的 scrollIntoView() 方法。这个方法可以使元素滚动到可见区域，并且可以接受一个参数，用于指定滚动行为的具体选项。例如，可以使用以下代码将页面滚动到指定的 DIV 元素：
document.getElementById("myDiv").scrollIntoView({behavior: "smooth"});在这个代码中，"myDiv" 是指定的 DIV 元素的 ID，"smooth" 表示滚动行为应该是平滑的。
需要注意的是，如果页面中的元素很多，可能会影响滚动性能。因此，在使用 scrollIntoView() 方法时，应该尽量减少页面中的元素，或者使用其他技术来优化滚动性能。
总之，JavaScript 可以用于实现将长页面滚动到指定的 DIV 元素的功能，而 scrollIntoView() 方法则是实现这个功能的关键。
相关·内容
2回答
我在somepage.html上有这样的标记：
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
浏览 1提问于2012-01-24得票数 1
回答已采纳
我正在启动一个angular js应用程序，我遇到了一个问题。我有一个html页面，其中有几个div图标在他们上，在鼠标上，我想要的背景改变颜色。使用jquery$(Document)函数(.ready(){ approach )可以很好地工作
THis页面根据url中的id更改内容(例如，appid的页面/apps/1-1)，但是，只有在第一次加载页面时，才会调用用于使用onmouse over事件设置背景颜色的jquery。如果我单击一个链接来更新一个新的应用程序，jquery不会生效，即使肯定调用了该方法如果我在浏览器中直接导航到有问题的页面，jquery会按预期工作，只有当我单击页面上
浏览 1提问于2014-11-07得票数 0
我是一个新手，了解HTML5和CSS3，但不了解JavaScript。我试图保持我的浏览器保持在相同的滚动位置，而我点击不同的网页在我的网站。这些页面是illustration.html、design.html和brochures.html。当我每次加载一个新的页面时，跳转回顶部会变得有点令人沮丧。下面是我的HTML5的一个例子。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../js/
浏览 5提问于2014-07-10得票数 2
回答已采纳
2回答
假设我遇到了这样的情况：
该页有4000像素长。
用户已经向下滚动页面，因此在视口上方隐藏了1000个像素的内容。
然后，用户单击一个按钮，任意长度的内容通过页面顶部的AJAX加载，然后按下视口下方的按钮(以及用户正在查看的内容)。
我尝试过编写Javascript回调，以向下滚动到用户单击按钮之前正在查看的内容，但体验并不是无缝的(当插入新内容时，滚动“向上”，然后是回滚“向下”)。
是否有任何方法将视口固定在用户正在查看的内容上？
这是一个简化的例子，但应该能让人明白这一点。
<div style="height: 1000px; width:1000px;&
浏览 6提问于2013-01-09得票数 5
2回答
在中，如果你向下滚动到“奖章部分”
然后刷新页面，您将看到数字在目标处滚动并停止。
现在的问题是，只有当奖章部分出现在浏览器视图中时，才能有数字滚动。
所发生的是，当用户加载网站，数字滚动完美，但它们发生在后台。当用户向下滚动到奖章部分时，当它结束时，该效果是不可见的，他需要刷新页面才能看到效果。
一位来自社区的人建议这个。我尝试在我的JavaScript中使用插件(请遵循小提琴或代码的JavaScript部分中的注释)
涉及的守则：
(function($) {
$.fn.countTo = function(options) {
options = options
浏览 4提问于2016-11-18得票数 2
回答已采纳
我有一些模板看起来大致如下：
<template name="items">
<div class="item-list">
{{#each items}}
{{> item}}
{{/each}}
<div>
{{> loadMore}}
</template>
<template name="item">
<div class="item" id="{{unique_string}}"&g
浏览 4提问于2012-11-16得票数 5
回答已采纳
1回答
动态加载图像
、、、
我必须在一个页面中显示很多不同大小的Image。
<div id="box1">
<span>Something About Image Goes Here</span>
<img src="img1.jpg" id="img1" />
</div>
<div id="box2">
<span>Something About Image Goes Here</span>
<img src="img2.jpg"
浏览 2提问于2013-06-05得票数 3
我测试的页面使用的id很少，我所有的定位器都是这些长的xpath。我想知道，如果我先执行一些javascript为每个元素注入唯一的classNames，然后通过className定位，这会有什么好处或坏处呢？
编辑我已经在使用页面对象模型了。
我的问题很简单，使用className (如"uniqueClass01" )而不是xpath (如"/html/body/div[13]/div/div/div/div/div/div/div[7]/div/div/div/div/div/div/div[2]/div/div[2]/div/div/div/div/div/di
浏览 1提问于2013-05-07得票数 0
1回答
我刚刚开始使用javascript，所以我需要一些帮助。我有一个简单的javascript在我的网页上切换一个div。div运行良好，但由于它位于页面的页脚中，所以它将打开，您将无法看到内容。如何使切换向下滚动，以便可以看到整个div？
我为其他脚本找到了类似的例子，但在这里无法应用它们。
这是我的javascript
function toggle() {
var ele = document.getElementById("showindex");
var text = document.getElementById("displayText");
if(e
浏览 3提问于2013-08-19得票数 1
回答已采纳
我有一个问题，页面转换不再发生时，从一个长页的底部运行。
下面是一个小摆设：
如果打开该示例并单击黑色导航按钮，则转换将按预期运行。但是，如果您返回到长页，滚动到底部并再次运行它转换不再发生，第二个页面只是直接出现。
任何帮助都将不胜感激。
<div data-role="page" id="long">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Long Page&
浏览 3提问于2014-06-27得票数 6
回答已采纳
我正在尝试使用href链接从页面的一部分链接到另一部分。
<div id="something">
<div class="toolbar">
<h1>Product information</h1>
<a class="button back" href="#">Back</a>
<a class="button slideup" href="#product"&
浏览 1提问于2010-07-22得票数 0
回答已采纳
我们网站上的一个网页非常长。尽管页面本身不调用任何javascript或JQuery函数，但它的基页注册了jquery源代码脚本(jquery-1.2.6.js)，这似乎会导致IE7显示"A script on this page is causing Explorer to run slow.“。当您单击一个链接时，您会收到一条消息，该链接将引导您离开这个长页面。
删除jquery源脚本的注册可以解决这个问题，但是页面上还有其他需要jquery的控件，所以这并不是一个真正的选择。
你知道为什么会发生这种情况吗?有什么办法解决它吗？谢谢。
浏览 0提问于2008-12-19得票数 2
回答已采纳
3回答
在我的HTML页面上，我希望能够“转到”/“滚动到”/“聚焦于”页面上的元素。
通常，我会使用带有href="#something"的锚标记，但我已经在使用hashchange事件和来加载此页面。
那么，有没有其他方法可以通过JavaScript让页面转到页面上的给定元素呢？
下面是我正在尝试做的事情的基本轮廓：
function focusOnElement(element_id) {
$('#div_' + element_id).goTo(); // need to 'go to' this element
}
<div
浏览 64提问于2011-01-26得票数 162
回答已采纳
我正在尝试组合一个非常简单的comet测试页面。我有一个主客户机页，div ID为#TextHistory。此页面中的javascript应创建到backend.php的打开连接，该连接使用javascript更新一个值并将其刷新回客户端页面。我真的不确定我做得对不对……我是基于的。
我发现在客户端页面(FireFox)上，backend.php看起来没有返回任何内容，并且在10秒后超时。如果我去掉backend.php中的php循环，它会返回"DefaultData“并直接附加到TextHistory DIV中。我觉得我已经很接近了，但是我做错了什么。很抱歉这里的格式很奇怪，看起来有
浏览 0提问于2011-01-28得票数 0
回答已采纳
我使用的是一个dateplustimepicker控件，它在超文本标记语言页面上工作得很好，但在ASP.NET页面上却不起作用。下面是我在ASP.NET页面上使用的代码：
<div>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
&
浏览 0提问于2011-09-30得票数 1
在HTML页面中，大约有30个搜索字段。输入输入并单击搜索按钮后，页面将重新加载搜索结果表
如何在加载时指向结果表。目前，我必须向下滚动才能看到结果。但期望的是它应该显示在视图中(自动向下滚动到结果表)
HTML：
<input type="submit" value="Search" id="search" class="btn btn-primary" th:onclick="'javascript:searchActionURL(\'' + @{/searchTables/search}
浏览 4提问于2015-06-11得票数 3
1回答
铬滚动虫？
、、、
我正在与怪异的Chrome行为进行斗争，当页面加载时，它会跳到页面的底部，然后立即返回到顶部。
可再生的
Chrome 84.0.4147.135 (正式制造)
铬80.3987.162
条件
URL‘#底部’中必须有一个片段，引用页面底部的一个元素
Javascript也将尝试使用html.scrollTop在页面的最底部滚动
当这两种情况都成立时，问题就会发生。页面跳到底部(有一个红色的div -它闪烁红色)，然后立即回到顶部(再次变成白色)。
当只有‘#底部’片段没有javascript或只有javascript没有‘#底部’片段，所有的工作与预期-页面是
浏览 4提问于2020-08-24得票数 2
我有这个页面
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel=&
浏览 2提问于2012-05-01得票数 0
我有一个位于页面底部的div：
<div id="myDiv"></div>
在执行完JS-function之后，我想转到这个div。换句话说，我想让我的url变成myurl#myDiv并转到我的div。但不需要重新加载页面。如何使用JavaScript做到这一点？不幸的是，我还没有为这个问题找到一个有效的解决方案。我没有使用任何JS库和框架。
浏览 2提问于2012-09-05得票数 7
回答已采纳
1回答
我的问题是，我想要样式我的CSS页面，使它看起来像在“打印预览”。我使用@media print CSS来制定打印规则。但是我不知道具体如何设计我的HTML页面，例如:我将div大小设置为A4格式，但是如果div中的文本比A4高度长，如何将div的某些部分移动到其他"A4“div
浏览 2提问于2015-11-29得票数 1
我的页面有一个ID (#C2)，其中加载了其他html页面(给出了单个页面的效果)。加载是用以下javascript完成的：
function ShowAjax(type) {
var filename = "text_" + type + ".htm"
$( "#C2" ).hide().load( filename ).fadeIn(500);
在加载到主页ID中的一个页面上，我需要一个“滚动到顶部”。为此，我使用一个div和一个点击处理程序来调用javascript函数(ScrollTop)。下面是链接：
<div c
浏览 0提问于2019-05-17得票数 0
回答已采纳
正如标题所说，当javascript int++达到所选值时，如何跳转到Page Top 'div id ="Top“div‘？我不希望单击一个按钮来这样做。我的需求是在使用'visibility:visible;‘显示文本div之前显示视觉背景幻灯片内容。这不是问题。问题是用鼠标涂鸦，并将当前的“可见性:隐藏”文本沿页面向下移动，寻找它，胡乱摆弄，在不知不觉中离开即将到来的顶部介绍文本。所以，在我的javascript代码行'document.getElementById("ArticleStyle").style.visibility =
浏览 18提问于2020-09-15得票数 0
回答已采纳
2回答
ASP.NET页面自动滚动到底部
、、、、
我有一个很大的asp.net页面。它有很多javascript和模式面板。它使用ModalPopupExtender控件(Microsoft Ajax Library)。
页面加载正常，我所有的javascript代码执行正常，但是突然屏幕滚动到底部。我也不知道原因。
在底部有许多隐藏的div(在弹出窗口中使用)和每个div的modalpopupextender控件。
这种情况只发生在Chrome上。
有什么想法吗？
浏览 0提问于2011-12-29得票数 1
我正在尝试使用javascript/html进行google扩展。目前，我只是想做一个页面，它的div与另一个网站的div完全相同。例如，在Google中，对于以下链接：，有一个div：<div id="gog"> ... </div>，在我的html页面中，这里有一个div: name="output"> ...imitate "gog“div .。如何使用javascript将"gog“的所有内容复制到"output”中。这不可能吗？任何例子都是很棒的！
注意到，我不是为谷歌翻译这一点，所以访问他们的ap
浏览 5提问于2010-12-17得票数 0
回答已采纳
1回答
我使用下面的脚本来执行标题中描述的操作。
<script type="text/javascript">
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$(
浏览 6提问于2015-05-20得票数 1
回答已采纳
我正在使用Grails构建一个web应用程序。我决定使用dojo，并在main.gsp中添加了一个用于开始的dojo鱼眼菜单，这样它就可以在应用程序的所有页面上使用。它适用于(主页) index.gsp页面，但一旦我选择了另一个，鱼眼菜单就消失了。如果我回到家，它就在那里。我修改了我的设置，对我来说一切都很好。我没有使用任何花哨的东西，只是简单的东西。我错过了一些东西，但我不能把它弄清楚。
为了清楚起见，我的main.gsp中的代码简化如下：
<html>
<head>
...
<g:layoutHead />
<!--
浏览 0提问于2009-09-28得票数 0
回答已采纳
5回答
DIV元素不滚动
、、、
。
登录任何随机用户名，并开始垃圾邮件聊天，直到你找到了DIV的底部。注意到它怎么不滚动？我得找出原因。
用于滚动JavaScript 的代码
// Note: CHATBOX_ID = "#chat"
Minte.UI.addChatEntry = function(html)
{
// Add the chat entry...
var entry = '<div>' + this.formatString(html) + '</div>';
$(CHATBOX_ID).html($(CHA
浏览 7提问于2011-07-13得票数 2
回答已采纳
1回答
我有一个html页面，通过外部源代码加载了几个IFrame。我无法控制外部资源。
当网页加载时，它将焦点放在其中一个IFrame上，而不是聚焦在页面顶部。
下面是我的简单html页面：
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="topp"
浏览 11提问于2019-11-12得票数 3
1回答
我正在构建一个由几个jquery移动页面组成的项目，每个页面都有一个导航栏。
当我查看每个页面时，$(document).ready函数会很好地启动，但是当我通过导航栏进入页面时，它就不会启动了。此外，在chrome调试器中，我只看到源文件夹中的一个html页面(我目前正在查看的页面)。
当我刷新页面时，该函数正常工作。
尝试将“$(文档).ready(函数() {)”替换为：
“$(”divdata-角色*=‘page’“).live(‘页面’，函数(事件，ui) {”正如有人建议的那样
但这也不起作用。
，这是我加载的第一页：
<!DOCTYPE html>
<html
浏览 1提问于2013-04-06得票数 3
回答已采纳
2回答
我有几个带有内容的div。一些上下文被包装起来，
content <a name='SomeName'> cool content </a> more content
在Javascript中，如何强制SomeName名称仅滚动到该DIV视图中。问题是页面上有许多包含内容的DIVs。
我知道Div的对象了。Div可以包含层次结构中的其他Div等。其中的某个地方就是SomeName锚。
网址：
浏览 0提问于2009-11-26得票数 1
回答已采纳
在我的代码点火器应用程序中，我创建了一个header.php和一个footer.php。加载视图时，在控制器中执行以下操作：
$this->load->view('includes/template', $data);
template.php文件如下所示：
$this->load->view('includes/header');
$this->load->view($main_content);
$this->load->view('includes/footer');
到目前为止，这项工作一直
浏览 2提问于2014-02-05得票数 0
我创建了这个测试html页面，允许单个用户向表中添加条目。它在Chrome和Firefox中运行得很好。但是当我在IE中尝试它时，它就不起作用了。我去了控制台，当我尝试添加一行时，它不会给我任何错误。有人能帮我弄清楚我需要什么才能让javascript部分起作用吗？在此之前，非常感谢您。这是我有的东西
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="css/style.css">
<script src="javascript/script
浏览 1提问于2015-11-02得票数 1
回答已采纳
1回答
我有一个导航栏下拉菜单，其中列出了存储在数据库中的事件标题。我试图允许用户单击这些链接之一，并将页面带到已单击的指定事件。问题是目标事件是由数据库动态创建的。
我认为我遇到了并发问题，因为ajax请求尚未完成，无法捕获事件并动态创建它。是否有方法链接到页面并等待从数据库创建事件并向下滚动到对象div。
下面是导航栏中的一个链接：
<a href="events.php#2">The Choice </a>
下面是events.php页面上的目标div：
<div id='2'>Dynamic content</div&g
浏览 5提问于2017-02-24得票数 1
回答已采纳
1回答
单击时将数据传递到模型中
、、、
新的角度。我正在构建一个应用程序，其中有一个用餐卡，你点击一个按钮，为一个模式，已扩展的信息。我有一张可折叠的餐单，每一餐都有一顿独特的饭菜。当我点击按钮时，只显示第一餐的数据。
我想知道如何将我点击的任何一顿饭的数据绑定到模式上？我已经将我的视图分割成两个html文件。下面是一些代码。
个人膳食视图：
<ul class="collapsible popout" data-collapsible="accordion" watch ng-controller= "mealView">
<li>
<!--
浏览 2提问于2015-10-29得票数 0
回答已采纳
我已经被提供了一堆html，我需要集成从我的web api提供的数据。我使用的是Angular，页面导航是由Angular-ui路由器处理的。
我的问题是，我必须使用的代码包含很多这样的锚点
<heading class="pageheader">
<a href="#step1" class="link-scroll">Scroll Down</a>
... bunch of stuff
</heading>
<div id="step1">
浏览 1提问于2015-11-16得票数 1
2回答
在实现googles no captcha后，我的网站页面加载速度明显变慢。
问题就出在这里，这是在<head></head>中使用的
<script src='https://www.google.com/recaptcha/api.js'></script>
我怎样才能用javascript加载它，并在页面加载后显示验证码？
我试过了：
function loadCaptcha(){
var div = document.createElement('div');
div.className
浏览 0提问于2017-09-17得票数 2
我的主页使用jquery ajax调用加载页面。在Pictures子页面中有3个div，每个div都使用ajax加载一个php。我想包括一个画廊js到每个子页。但是，js不会加载。下面是我在子页面的index.php中的代码：
<script type="text/javascript">
$(function()
{
var actualmenu = 'fooldal.html';
$('#tartalom').load('fooldal.html');
$('.fooldal').cli
浏览 0提问于2016-06-26得票数 1
代码是用来切换图像的滑块。当我运行页面时，我会得到以下错误：
无法设置属性'onclick‘of null。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slider</title>
<link rel="stylesheet" type="text/css" href="sliderswag.
浏览 3提问于2015-12-01得票数 1
2回答
我正在使用jquery滚动到页面的各个部分。
代码如下：
// Scroll to element
$('#menu li a').click(function(){
var elementId = $(this).attr('href');
$('html, body').animate({ scrollTop: $(elementId).offset().top }, 1600);
return false;
});
<ul id="menu">
<
浏览 0提问于2011-04-15得票数 2
回答已采纳
在我执行this.form.submit() onchange事件之后，它会重新加载页面并显示在页面的最顶端。有没有可能的解决方案被带到js onchange调用之前的相同页面位置？
浏览 0提问于2012-08-10得票数 0
我的网页包含了很多img标签，但是当它开始显示时，大多数img都是隐藏的。我只希望当用户显示要查看它们时才加载imgs，否则页面会产生过多的网络流量。
我知道我可以使用javascript动态地将img标记插入DOM中。但是这样我就失去了搜索引擎索引这些图片的好处，我想让搜索引擎机器人看到这些图片。
是否有一种方法可以保持DOM结构不变，同时只在需要时加载imgs？
浏览 2提问于2014-03-09得票数 0
回答已采纳
我刚刚尝试用jQuery的.load方法更改页面内容。
虽然内容更改没有问题，但我发现如果我尝试选择某些内容，jQuery仍然“看到”旧内容，例如：
页面：
<div id="mycontentarea">
<div id="myfirstcontent"></div>
<div id="mysecondcontent"></div>
</div>
替换内容：
<div id=mythirdcontent"></div>
<
浏览 0提问于2012-04-27得票数 1
回答已采纳
我的帖子旁边有一个浮动的盒子。这是post的代码。
<div class="post-entry>
<div class="float-div">
data
</div>
divs and text
</div>
这是javascript代码，使其具有良好的移动效果。
<script type="text/javascript">
$(function() {
var offset = $(".float-div").offse
浏览 2提问于2011-08-12得票数 0
我使用一个简单的javascript切换函数来展开div以显示其内容。如果div位于屏幕底部附近，它会展开，部分div会从屏幕上消失。
如何让页面自动向下滚动以确保div在视图中？
浏览 2提问于2011-08-01得票数 0
7回答
我在div里面有一个网格视图..。我想使用jquery从div底部滚动到div的顶部。任何建议..。
<div id="GridDiv">
// gridview inside..
</div>
我的网格视图中将有自定义分页生成的链接按钮.我将滚动到div顶部从底部的链接按钮点击..。
protected void Nav_OnClick(object sender, CommandEventArgs e)
{
LinkButton lb1 = (LinkButton)sender;
//string s = lb
浏览 3提问于2010-03-03得票数 55
回答已采纳
1回答
我在使用HTML和javascript时遇到了以下问题。我的网站在div中包含了这样一个HTML页面：
<object name="cont" type="text/html" data="myHtmlPage.html"></object>
我有一个javascript函数(链接到主页)来更改该对象的内容。
代码运行良好，因为我可以在“内部”页面中导航，而无需更改外部上下文。
问题是，现在我需要从加载在该对象中的html页面调用主页面javascript上的函数(需要在主页1上调用函数，因为我必须更改主页面div的一些属
浏览 2提问于2015-08-31得票数 4
我正在使用jQuery手机，当我点击按钮时，我正试图显示第二个页面/div。如何在按钮中正确使用标签？我需要以某种方式将它链接到javascript函数中吗？
<body>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<form>
<!-- some textboxes -->
浏览 1提问于2014-07-28得票数 0
虽然我知道JavaScript，但我对HTML和Java还很陌生。 我想要一个图片库，我有下来，但我唯一能编码的东西是在页面底部的容器中打开的。因此，我编写了一些JavaScript函数来使它更“专业”：首先打开它，保存y位置，然后向下滚动，创造出它打开图像的错觉。之后，当您单击x时，它将向上滚动到x=0和保存的y位置，并将关闭窗口。 一切正常，但y位置的变量仅保存为0。下面是调用它的HTML代码部分： <img src="image.jpg" alt="An Image" style="width:100%" onclick="
浏览 15提问于2019-12-18得票数 1
回答已采纳
我有一个HTML仪表板页面，我使用ajax将其他内容加载到其中。一切正常，它显示了我的其他页面，但问题是在它在新页面中加载新内容之后，我的javascript代码无法工作。
这是仪表板页面中的div。
<div id="ajax_load">
</div>
这是我的ajax代码
$(document).ready(function() {
$("#ajax_load").load("./profile.html");
});
这是我的档案页面
<h1>hi</h1>
<script&
浏览 0提问于2019-05-13得票数 1
回答已采纳
在单击页脚页面底部的按钮后，我尝试使用AngularJS ng-include登录到不同页面的顶部时遇到问题。
HTML (index.html)
<body>
<a name="top"></a>
<!-- header section -->
<div ng-include="'views/header.html'"></div>
<!-- views section -->
<div ng-view></div>
<!
浏览 0提问于2018-04-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
