原生js模拟锚点,实现点击后,内容定位到本页的对应位置

转载 2017年08月11日 11:04:57

原文地址:http://www.cnblogs.com/xiangming25/p/6078126.html


这时,如果我们使用锚点的方法就会存在一个问题,当我们点击顶部的tab部分是

 

 

页面的url就回变成http://www.×××××.com?brandId=1&brandName=***#434

 

这个时候我们在点击翻页的时候,页面就会跳转到页面的顶部,而不是我们访问的这个位置。

 

解决的办法是:

 

1. 不给tab部分添加类似与<a href="/test#333"></a>, 写成 <a href="javascript:;"></a>阻止a标签的默认操作。

2. 给 a 标签添加点击事件: <a href="javascript:;" ng-click="_scrollTo('someId')"></a>

3. 定义对应的实现方法:

  function _scrollTo(id){

    var _id = document.getElementById(id);

    window.scrollTo(0,_id.offsetTop);

  }

ps: 这里的id是我们想跳转到的节点对应的id

js配合锚点实现动画滚动与监听

这个技能感觉不错,配合bootstrap写出的。下面是干货: ul 的每个li的每个a中的href指向锚点目标,比如说Home。 下面给出我发现好的源代码:$('#navbar-menu ul li...

js平滑移动到锚点

div { height: 500px; width: 400px; } #div1 { background-color: #ff0; } #div2 { backgroun...

原生JS实现点击按钮显示更多内容

DIV显示部分内容,点击按钮后显示全部内容,点击收起隐藏部分内容.

完整版百度地图点击列表定位到对应位置并有交互动画效果demo

1.前言 将地图嵌入到项目中的需求很多,好吧,我一般都是用的百度地图。那么今天就主要写一个完整的demo。展示一个列表,点击列表的任一内容,在地图上定位到该位置,并有动画效果。来来来,直接上demo...

html/js定位到锚点(单页hash跳转)

锚点 * {margin: 0; padding: 0;} h1 {background: blue;} h1 > strong {b...

html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

对于网页编程开发人员来说,在网站页面开发的过程中,有时候我们需要实现当点击一个按钮或者超链接时,立刻滚动跳转定位到本页面中指定的位置。对于大多数的编程老手来说,这些都不是什么难事,但对于一些新手或者没...

(原生js)点击body隐藏div,但若点击的是指定的位置则不隐藏

仿大众点评网的切换城市: http://www.dianping.com/shijiazhuang 重点:取消事件冒泡 模拟select控件...

【unity3d学习笔记】实现点击小地图让角色移动至对应位置

步骤步骤 实现小地图 转换坐标 发出射线 实现效果1.实现小地图小地图使用Render Texture是很容易实现的,演示效果如下图所示:2.转换坐标当点击小地图时,可以获得点击位置的屏幕空间下的坐标...

登录按钮点击之后本页出现一个小的页面,类似于弹窗

登录按钮点击之后本页出现一个小的页面,类似于弹窗 将登录之后显示的弹窗写在这个页面里面,代码如下 登录 ...

js 模仿锚点定位

A - E F - L M - T ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生js模拟锚点,实现点击后,内容定位到本页的对应位置
举报原因:
原因补充:

(最多只允许输入30个字)