`
270279long
  • 浏览: 9948 次
社区版块
存档分类
最新评论

修理火狐、chrome的页内锚点

阅读更多
// 修理火狐、chrome的页内锚点
function fixAnchorInPage(iframe) {
$(iframe).contents().find('a').each(function() {
var link = $(this);
var href = link.attr('href');
if (href && href.substring(0, 1) == '#') {
var name = href.substring(1);
$(this).click(function() {
var nameElement = $(iframe).contents().find("[name='" + name
+ "']");
var idElement = $(iframe).contents().find("#" + name);
var element = null;
if (nameElement.length > 0) {
element = nameElement;
} else if (idElement.length > 0) {
element = idElement;
}
if (element) {
var offset = element.offset();
var iframeTop = $(iframe).offset().top;
window.scrollTo(offset.left, offset.top + iframeTop-15);
}
});
}
});
}
分享到:
评论

相关推荐

    页面内锚点定位及跳转方法总结(推荐)

    在进行页面内锚点定位时,还应注意以下几点: 1. 确保锚点ID的唯一性,避免ID冲突。 2. 考虑移动设备和不同浏览器的兼容性,尤其是滚动行为可能因平台而异。 3. 在页面结构复杂时,可能需要计算偏移值,以适应动态...

    jQuery页面滚动显示浮动菜单栏锚点定位效果

    本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时,展示一个浮动菜单栏,并实现锚点定位效果。这个功能对于提高用户体验,尤其是内容丰富的长页面,是非常有用的,因为它可以帮助用户快速导航到页面的不同...

    JS如何实现在页面上快速定位(锚点跳转问题)

    JS实现页面快速定位的技术主要涉及锚点跳转的概念和应用。锚点,也被称作片段标识符,其作用是允许用户点击链接后页面能够跳转到特定的位置。在网页设计中,尤其是在内容较多、页面较长的情况下,合理使用锚点可以...

    jQuery页面内滑动到锚点导航效果,回到顶部

    本主题将深入探讨如何使用jQuery实现页面内滑动到锚点导航以及添加“回到顶部”的功能。 首先,锚点导航是网页设计中一个常见的功能,允许用户通过点击链接直接跳转到页面内的特定位置。在HTML中,我们可以通过设置...

    html页面锚点跳转

    html页面锚点跳转

    JavaScript组件焦点与页内锚点间传值的方法

    本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法。分享给大家供大家参考。具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的。 如何光标放上输入框就触发事件,离开输入框就触发另一个事件...

    jQuery实现页面内锚点平滑跳转特效的方法总结

    实现页面内锚点平滑跳转特效是前端开发中常见的需求,主要用来改善用户体验,使页面跳转时更加顺畅和自然。jQuery作为一个广泛使用的JavaScript库,提供了一种简单有效的方法来实现这种平滑跳转特效。本文将主要介绍...

    JS锚点平滑跳转

    传统的HTML锚点链接可以直接跳转到页面内的某个特定位置,但这种跳转通常是瞬间完成,缺乏用户体验上的平滑性。JS锚点平滑跳转则通过JavaScript代码来改善这一情况,使得页面滚动更加自然流畅。 一、基本原理 ...

    jquery html锚点链接_a标签当前页面锚点_a标签锚点

    这种链接可以用于页面内的导航,帮助用户快速跳转到同一页面的不同部分。例如: ```html 跳转到第一部分 ... 这是第一部分的内容 ``` 点击“跳转到第一部分”的链接后,浏览器会滚动到具有`id="section1"`的元素...

    vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1、点击导航平滑滚动到导航内容处 2、div内滚动时当前导航需要做响应 代码如下: 1、html结构...

    点击锚点链接时页面滚动的特效(Javascript Smooth Scroll)

    **描述:**在网页设计中,平滑滚动(Smooth Scroll)是一种常见的用户体验优化技术,它使得当用户点击页面上的锚点链接时,页面能够平滑地、渐进式地滚动到目标位置,而非瞬间跳转。这种效果使得页面滚动更为流畅,...

    导航定位页面锚点官网.zip

    `css`文件夹内的CSS代码则展示了如何通过CSS控制锚点的样式和动画效果。通过阅读和分析这些文件,开发者可以了解如何创建响应式的锚点导航,确保在不同设备上都能顺畅工作。此外,`js`文件夹中的JavaScript代码将...

    GEF锚点鼠标定位

    在图形编辑框架(GEF,Graphical Editing Framework)中,锚点(Anchor)是一个关键概念,它是连接模型元素之间的连接线在元素上的固定点。在GEF中,锚点的定位直接影响到连接线的形状和行为,特别是当用户通过鼠标...

    锚点快速定位到页面中指定位置

    在网页设计中,锚点(Anchor)是一种非常实用的功能,它允许用户通过点击链接快速跳转到页面内的特定位置。本文将深入探讨锚点的工作原理、如何创建锚点以及其在实际网页开发中的应用。 首先,锚点是HTML中标签的一...

    微信小程序 scroll-view 实现锚点跳转功能

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll> 的 scroll-into-view 属性。  实现锚点跳转主要以下几点:  1、最外层容器使用 scroll-view  2、...

    jQuery侧边导航锚点定位代码.zip

    如果当前滚动位置在某个锚点的上方一定范围内,就将相应的导航项设为激活状态。 此外,为了实现平滑滚动效果,我们还可以添加以下代码: ```javascript $('a[href^="#"]').on('click', function(e) { e....

    锚点导航栏效果

    锚点导航栏是一种常见的网页设计元素,主要用于提升用户体验,帮助用户快速定位到页面中的特定区域。在本项目中,我们讨论的是一个固定在页面右侧的锚点链接导航菜单,其功能是当用户点击导航菜单中的不同栏目时,...

    jquery锚点链接屏幕上下滚动效果

    固定在页面右侧的锚点链接导航菜单,点击对应的导航栏目页面自动滚动到对应的锚链接名所在的位置,当前导航以抽屉式从右往左滑出显示,图标与CSS样式经过了加密处理,如果想要修改的话也可以自行修改使用,主要还是...

Global site tag (gtag.js) - Google Analytics