原生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

相关文章推荐

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

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

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

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

AJAX实现不刷新页面点击按钮在目标位置加载目标内容

AJAX可以实现异步请求数据,即不刷新页面的情况下请求服务器,加载目标内容到页面。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术...

js 模仿锚点定位

A - E F - L M - T ...

iOS-高德地图点击地图获取点击点对应的地理位置,并添加自定义的大头针

iOS-高德地图点击地图获取点击点对应的地理位置,并添加自定义的大头针

细说cocos2d坐标系(坐标系,锚点,点击精灵判断)

add: 默认情况下addchild总是setpostion(0,0),锚点精灵是(0.5,0.5),cclayer是(0,0); 1.坐标系 坐标系作用是说明质点的方向,表明质点位置。坐标...

纯CSS实现锚点跳转位置上下偏移的办法

css

JS:目录跟随定位效果的实现及锚点中使用name和id定位的区别。

一、目录跟随定位效果 最近在使用百度百科(http://baike.baidu.com/)的时候,发现了个不错的功能目录跟随定位。也是百度在用户体验方面做的改善。 目录跟随定位:实现的效果就是当滚...

js实现两个div左右并列显示,并实现点击标题,切换内容显示

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stri...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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