`
kstgjfk403
  • 浏览: 28792 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

跨页面跳转的锚点定位

阅读更多

有时候需要实现从当前页面跳转到下个页面的某个模块,这就要使用锚点定位来实现:

格式: 当前页面的 href="aaaa.html#nextMode"

在要定位显示的模块中:添加值为nextMode的id和name, 如定位到一个div

<div id="nextMode" name="nextMode"></div>

 

以上方法在firefox中可直接实现,但chrome中不兼容该方法,需添加js辅助,其兼容方法为:

var url = window.location.href;

var id = url.substring( url.lastIndexOf("#")+1);

document.getElementById(id).scrollIntoView(true);

//或用jquery实现平滑过渡

$("html body").animate({scrollTop: id }, 1000); //1秒内完成

分享到:
评论

相关推荐

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

    本篇文章主要介绍了JS如何实现在页面上快速定位(锚点跳转问题),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

    上一篇是关于scroll事件绑定的问题,这一篇的问题是:点击锚点跳转到相应DIV的问题。 最简单的方法是锚点用标签,在href属性中写入DIV的id。如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; ...

    jQuery网站右侧锚点定位跳转导航菜单代码

    这是一款比较简单实用的jQuery网站右侧锚点定位跳转导航菜单代码,利用A标签进行锚点定位,点击右侧悬浮导航菜单立即跳转到左侧相应内容。

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

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

    jQuery锚点带动画跳转特效.zip

    jQuery锚点带动画跳转特效是一款非常实用的特效,实现了jquery锚点带动画跳转和返回顶部,适用于购物商城网站、素材网站,方便定位到相应的模块,增强用户体验效果。

    Android 实现锚点定位思路详解

    本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。通过&lt;a&gt; 去设置页面内锚点定位跳转。具体实现思路大家跟随脚本之家小编一起通过本文看下吧

    css锚点定位被顶部固定导航栏遮住的解决方案

    1. 锚点定位机制 如果没有滚动条,锚点失效。 如果有滚动条,滚动条滚动到地址 hash (地址 # 号后面的内容)对应的锚点元素padding-box上边缘位置。 2. 解决方案 示例 示例源码 示例在线预览 (1)padding+margin ...

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

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

    jQuery锚点动画跳转顶部效果

    jquery锚点带动画跳转返回顶部特效,可定位到网页的相应模块,多种方式回到网页顶部效果,第一种方式是最初打开页面的时候,点击最上边的导航按钮,可进入本页面相应的区域。第二种方式是,拖动滚动条之后,网页右侧...

    CSS解决链接锚点定位偏移的代码

    不知道有没有人研究过这个,当点击页面的锚点连接的时候一般就跳转到特定id的元素,而实际表现的是滚动条滚动使该特定id元素对齐滚动条所处元素的顶端。

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

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到...jQuery实现页面内锚点平滑跳转&lt;/title&gt;&lt;base target="_blank" /&gt; &lt;style type="text/css"&gt; #hovertree { height: 800px; backgroun

    导航滚动监听

    这不是你想要的,除非你知道导航滚动监听是什么

    详解Vue项目中实现锚点定位

    今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面。 解决 最终参考vue2.0中怎么做锚点定位...

    【JavaScript源代码】JavaScript 获取滚动条位置并将页面滑动到锚点.docx

     这篇来记录下最近工作中遇到的一个问题,在app原生和前端h5混合开发的过程中,其中一个页面是选择城市列表的页面,类似于美团饿了么城市选择,银行app中银行列表选择,通讯录中快速定位到联系人选择的锚点位置等...

    jQuery仿天猫商城滚动楼层导航特效

    jQuery仿天猫商城滚动楼层导航特效是一款页面滚动锚点定位快速跳转代码。

    angularJs中跳转到指定的锚点实例($anchorScroll)

    监听$location.hash()并且滚动到url指定的锚点的地方。 可以通过$anchorScrollProvider.disableAutoScrolling()禁用。 依赖:$window $location $rootScope 使用:$anchorScroll([hash]);hash 将会指定元素滚动到的...

    jQuery锚点带动画跳转特效特效代码

    jQuery锚点带动画跳转特效是一款非常实用的特效,实现了jquery锚点带动画跳转和返回顶部,适用于购物商城网站、素材网站,方便定位到相应的模块,增强用户体验效果。

Global site tag (gtag.js) - Google Analytics