正文

如何转到页面上的特定元素？ [复制]

 2023-03-10  53

关键词：

【中文标题】如何转到页面上的特定元素？ [复制]【英文标题】：How to go to a specific element on page? [duplicate] 【发布时间】：2011-06-15 15:47:28 【问题描述】：

在我的 HTML 页面上，我希望能够“转到”/“滚动到”/“关注”页面上的某个元素。

通常，我会使用带有href="#something" 的锚标记，但我已经使用 hashchange 事件和BBQ plugin 来加载此页面。

那么有没有其他方法可以通过 JavaScript 让页面转到页面上的给定元素？

这是我正在尝试做的基本大纲：

function focusOnElement(element_id) 
     $('#div_' + element_id).goTo(); // need to 'go to' this element


<div id="div_element1">
   yadda yadda 
</div>
<div id="div_element2">
   blah blah
</div>

<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>

【问题讨论】：

我诚实的建议是放弃 BBQ 插件。多么糟糕的想法，破坏了一个愚蠢的存储机制的预期默认行为。我们将 BBQ 插件用于幻灯片，这是该页面的核心功能。该插件允许我们通过 Ajax 获取下一个项目，而无需重新发布页面的其余部分。在这种情况下，BBQ 插件就显得至关重要了。如果您仍在使用 ***，可能值得将答案更新为更流行的原生答案。 【参考方案1】：

如果该元素当前在页面上不可见，可以使用原生的scrollIntoView() 方法。

$('#div_' + element_id)[0].scrollIntoView( true );

其中true 表示与页面顶部对齐，false 表示与底部对齐。

否则，您可以使用 jQuery 的 a scrollTo() plugin。

或者也许只是获取元素的topposition()^(docs)，并将scrollTop()^(docs)设置为该位置：

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

【讨论】：

+1 用于我根本不知道的本机 scrollIntoView。有那么一刻我以为是jquery。 :) @yetanothercode：感谢您添加 MDN 链接。昨晚我有点懒惰。 :o) position().top 不正确，因为它与父元素相关。您应使用与文档相关的offset().top。我将此与公认的答案结合起来，效果很好：function($) $.fn.goTo = function() $(this)[0].scrollIntoView(true); return this; // for chaining... )(jQuery); 来自 MDN：scrollIntoView is experimental technology 以及它们的兼容性仅适用于 firefox【参考方案2】：

插件形式的标准技术如下所示：

(function($) 
    $.fn.goTo = function() 
        $('html, body').animate(
            scrollTop: $(this).offset().top + 'px'
        , 'fast');
        return this; // for chaining...
    
)(jQuery);

然后你可以说$('#div_element2').goTo(); 滚动到<div id="div_element2">。选项处理和可配置性留给读者练习。

【讨论】：

一个问题是，为什么要为 'html, body' 而不仅仅是 'body' 制作动画？ @Lior：老实说，我现在这样做是因为我一直这样做；我认为'html,body'的最初原因是为了处理浏览器的差异。太棒了。非常有用。我添加了一个变量，这样，如果有一个元素仍在下方的标题，我可以传递一个否定值以更早地停止滚动：usage: @987654325 @函数：

(function ($)      $.fn.goTo = function (addToScroll)          if (!addToScroll)  addToScroll = 0;          $('html, body').animate(             scrollTop: ($(this).offset().top + addToScroll) + 'px'         , 'fast');         return this; // for chaining...      )(jQuery);

【参考方案3】：

这是一个简单的 javascript

当您需要将屏幕滚动到具有 id="yourSpecificElementId" 的元素时调用它

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

你需要这个函数来工作：

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

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

【讨论】：

返回数组中的值是否有特定原因？ @Zze 这样就可以直接传给window.scroll了。 developer.mozilla.org/en-US/docs/Web/API/Window/scroll 或者至少我猜这是他的意图。编辑：我现在意识到滚动不接受数组作为参数。忽略我的评论。【参考方案4】：

要滚动到页面上的特定元素，您可以在jQuery(document).ready(function($)...) 中添加一个函数，如下所示：

$("#fromTHIS").click(function () 
    $("html, body").animate( scrollTop: $("#toTHIS").offset().top , 500);
    return true;
);

它在所有浏览器中都像一个魅力。根据需要调整速度。

【讨论】：

【参考方案5】：

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

同样的事情，但将其包装在一个函数中：

function scrollIntoView(eleID) 
   var e = document.getElementById(eleID);
   if (!!e && e.scrollIntoView) 
       e.scrollIntoView();

这甚至适用于 iPhone 上的 IFrame。

使用 getElementById 的示例： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementbyid

【讨论】：

简单，在 jQueryMobile 中运行良好，其中哈希标签可能有问题。甜蜜。简单，适用于 iphone 截至 2016 年，scrollIntoView() 在技术上是非标准的 (ref)，但您几乎可以在任何地方使用它 (ref)。它不滚动。它只是把你扔在上面。没有任何滚动。如何制作动画？这是一个基本的 JavaScript 方法，没有动画。但是，它不需要框架（例如 JQuery）来运行。如果您想要动画，请使用此处提到的类似内容：***.com/questions/1586341/…

如何使用 Selenium 等待页面上的元素可见（然后转到其他内容）？

】如何使用Selenium等待页面上的元素可见（然后转到其他内容）？【英文标题】：HowcanIuseSeleniumtowaitforanelementtobevisibleonapage(butthenmoveontosomethingelse)?【发布时间】：2022-01-2323:13:39【问题描述】：我正在尝试从网页中抓取URL，它们位... 查看详情

如何从 _Layout.cshtml 页面隐藏页面上的特定元素

】如何从_Layout.cshtml页面隐藏页面上的特定元素【英文标题】：Howtohidespecificelementonpagefrom_Layout.cshtmlpage【发布时间】：2017-02-2210:59:45【问题描述】：我从事mvc5项目。在我的_Layout.cshtml上，我有一个名为id="topBar"的html元素... 查看详情

转到不同页面链接上的特定选项卡单击并切换活动类

】转到不同页面链接上的特定选项卡单击并切换活动类【英文标题】：GotoSpecificTabondifferentPagelinkclickandtoggleactiveclass【发布时间】：2015-09-0812:39:59【问题描述】：我正在开发一个使用Twitter的Bootstrap框架和他们的BootstrapTabsJS的网页... 查看详情

laravel 转到页面分页

...agination【发布时间】：2012-09-0206:30:20【问题描述】：知道如何转到特定的分页页面吗？【问题讨论】：我不确定我是否听懂了你的问题。大卫巴克回答了吗，或者您想知道如何在URL中没有查询字符串的情况下加载特定页面？请详... 查看详情

如何使用 UIPageViewController 跳转到特定页面？

】如何使用UIPageViewController跳转到特定页面？【英文标题】：HowtojumptoaparticularpagewithUIPageViewController?【发布时间】：2017-07-1405:47:53【问题描述】：我正在使用Xcode8的默认基于页面的应用程序，但我一直在尝试跳转到特定页面（而... 查看详情

如何跳转到 Bootstrap 的 Carousel 中的特定项目？ [复制]

】如何跳转到Bootstrap的Carousel中的特定项目？[复制]【英文标题】：HowtojumptoaspecificiteminBootstrap\'sCarousel?[duplicate]【发布时间】：2013-01-1616:25:46【问题描述】：使用Bootstrap的轮播，我希望能够点击一个链接并跳转到轮播中的特定幻... 查看详情

HTML -- 到达页面上的特定部分后，如何“粘贴”我的导航栏？

】HTML--到达页面上的特定部分后，如何“粘贴”我的导航栏？【英文标题】：HTML--HowcanI"stick"mynavbarafterreachingaspecificsectiononpage?【发布时间】：2014-12-1712:25:15【问题描述】：我想了两种不同的方法来解决这个问题，但我需... 查看详情

如何循环浏览页面上的所有 DOM 元素？

】如何循环浏览页面上的所有DOM元素？【英文标题】：HowcanIloopthroughALLDOMelementsonapage?【发布时间】：2011-05-1411:15:37【问题描述】：我正在尝试遍历页面上的所有元素，因此我想检查此页面上存在的每个元素是否有一个特殊的类... 查看详情

如何跳转到 UIPageViewController 中的特定页面，setViewControllers 不起作用

】如何跳转到UIPageViewController中的特定页面，setViewControllers不起作用【英文标题】：HowtojumptoaspecificpageinUIPageViewController,setViewControllersnotworking【发布时间】：2018-08-0517:22:37【问题描述】：我试图在按下按钮时跳转到特定页面，我... 查看详情

如何从字典中删除特定元素？ [复制]

】如何从字典中删除特定元素？[复制]【英文标题】：Howtoremovespecificelementfromthedictionary?[duplicate]【发布时间】：2021-10-0303:20:39【问题描述】：如何从字典中删除特定元素或数据？假设我有这本字典data=\'name\':\'Instagram\',\'follower_cou... 查看详情

如何使用 XPath 找到特定元素？ [复制]

】如何使用XPath找到特定元素？[复制]【英文标题】：HowcanIfindaspecificelementwithXPath?[duplicate]【发布时间】：2014-03-2306:24:18【问题描述】：如何使用xpath找到选项1？注意：id是在每次构建后生成的。我试过了，还是不行：/li[@class=\'it... 查看详情

如何使用 Objective-C 使用 VFR pdf 阅读器库转到特定页面

】如何使用Objective-C使用VFRpdf阅读器库转到特定页面【英文标题】：HowtogotospecificpagewithVFRpdfreaderlibrarywithObjective-C【发布时间】：2015-03-0812:37:23【问题描述】：我正在使用vfr阅读器来显示我的pdf文件(https://github.com/vfr/Reader)。我的i... 查看详情

href="#" 转到页面顶部 - 阻止？ [复制]

】href="#"转到页面顶部-阻止？[复制]【英文标题】：href="#"GoingtoTopofPage-Prevent?[duplicate]【发布时间】：2012-10-1118:25:32【问题描述】：我有一个包含一些jQuery函数的页面。页面上的HTML如下所示：<ahref="#"class="service"&... 查看详情

转到特定页面后，如何“通过引用”将 SwipeView 的 currentIndex 设置为 TabBar 的 currentIndex？

】转到特定页面后，如何“通过引用”将SwipeView的currentIndex设置为TabBar的currentIndex？【英文标题】：HowtosetcurrentIndexofSwipeViewtocurrentIndexofTabBar"byreference"aftergoingtospecificpage?【发布时间】：2017-04-2400:27:30【问题描述】：我开... 查看详情

如何对特定行上的 numpy 数组进行排序，其他行相应更改？ [复制]

】如何对特定行上的numpy数组进行排序，其他行相应更改？[复制]【英文标题】：Howtosortanumpyarrayonaspecificrow,withotherrowstochangeaccordingly?[duplicate]【发布时间】：2021-01-1303:32:36【问题描述】：我有一个像这样的numpy数组aIn[318]:aOut[318]:a... 查看详情

如何使用猫鼬更新子文档数组中的特定元素？ [复制]

】如何使用猫鼬更新子文档数组中的特定元素？[复制]【英文标题】：Howtoupdateaspecificelementinsideasub-documentarrayusingmoongoose?[duplicate]【发布时间】：2018-05-2712:57:39【问题描述】：我在我的应用程序中使用node.js和mongoose。我有一个架... 查看详情

如何在页面上的特定滚动位置启动功能？

】如何在页面上的特定滚动位置启动功能？【英文标题】：Howtostartfunctionatspecificscrollpositiononpage?【发布时间】：2021-01-1302:57:39【问题描述】：我正在尝试使用以下代码在画布中翻转图像。如果我把画布放在页面的中间，我想知... 查看详情

如何检查光标是不是在元素上？ [复制]

】如何检查光标是不是在元素上？[复制]【英文标题】：Howtocheckifthecursorisoveranelement?[duplicate]如何检查光标是否在元素上？[复制]【发布时间】：2011-03-2415:26:42【问题描述】：如何使用JQuery/Javascript检查光标是否位于html页面上的di... 查看详情