js实现锚点定位的原理是，算出定位的标签距离顶部的高度，点击触发标签，重新赋值滚动条的高度到达指定位置。



<!DOCTYPE html>

<html>

<head>

<title>letter.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet"

	href="../standard/plugins/bootstrap/css/bootstrap.css" type="text/css"></link>

</head>

<body ng-app="letter_App" ng-controller="letter_Ctrl">

	<div>

		<span>索引:</span> <span ng-click="btn_letter_onclick('A')" >A</span> <span

			ng-click="btn_letter_onclick('B')">B</span> <span

			ng-click="btn_letter_onclick('C')">C</span> <span

			ng-click="btn_letter_onclick('D')">D</span> <span

			ng-click="btn_letter_onclick('E')">E</span> <span

			ng-click="btn_letter_onclick('F')">F</span> <span

			ng-click="btn_letter_onclick('G')">G</span> <span

			ng-click="btn_letter_onclick('H')">H</span> <span

			ng-click="btn_letter_onclick('I')">I</span> <span

			ng-click="btn_letter_onclick('J')">J</span> <span

			ng-click="btn_letter_onclick('K')">K</span> <span

			ng-click="btn_letter_onclick('L')">L</span> <span

			ng-click="btn_letter_onclick('M')">M</span> <span

			ng-click="btn_letter_onclick('N')">N</span> <span

			ng-click="btn_letter_onclick('O')">O</span> <span

			ng-click="btn_letter_onclick('P')">P</span> <span

			ng-click="btn_letter_onclick('Q')">Q</span> <span

			ng-click="btn_letter_onclick('R')">R</span> <span

			ng-click="btn_letter_onclick('S')">S</span> <span

			ng-click="btn_letter_onclick('T')">T</span> <span

			ng-click="btn_letter_onclick('U')">U</span> <span

			ng-click="btn_letter_onclick('V')">V</span> <span

			ng-click="btn_letter_onclick('W')">W</span> <span

			ng-click="btn_letter_onclick('X')">X</span> <span

			ng-click="btn_letter_onclick('Y')">Y</span> <span

			ng-click="btn_letter_onclick('Z')">Z</span> <span

			ng-click="btn_letter_onclick('other')">其他</span>

	</div>

	<div style="height: 800px;">定位</div>

	<div class="z_A">A</div>

</body>

<script type="text/javascript"

	src="../standard/plugins/angular/angular.js"></script>

<script type="text/javascript"

	src="../standard/plugins/jquery/jquery.min.js"></script>

<script type="text/javascript">

	var letter_App = angular.module("letter_App", []);

	letter_App.controller("letter_Ctrl", function($scope, $http) {

		$scope.btn_letter_onclick = function(letter) {

			$(document).scrollTop($('.z_' + letter).offset().top);

		};

	});

</script>

</html>

js实现锚点定位的更多相关文章

  1. js超链接锚点定位

    <html> <head> <meta charset="UTF-8"> </head> <body> <a on ...

  2. html中设置锚点定位的几种常见方法（#号定位）

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  3. html锚点定位不准确问题

    问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...

  4. 微信小程序基于scroll-view实现锚点定位

    代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  5. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  6. html 锚点定位

    在html中设置锚点定位我知道的有几种方法.在此和大家分享一下: 1.使用id定位: <a href="#1F" name="1F">锚点1< ...

  7. jquery 滚轴滚动 导航定位和锚点定位

    自己写的,只测试了ie9+, firefox,chrome 以下js更好 var fixbar={ init:function(){ "use strict"; // 滚轴 导航位 ...

  8. 使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置

    使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...

  9. 【TRICK】解决锚点定位向下浮动Xpx问题

    1. 问题描述 页面滚动后,菜单栏会固定在页头,当锚点定位时,菜单会遮盖部分定位后的内容,所以需要在锚点定位后自动向下漂移Xpx. 2. 解决办法 a. 利用空div 占位,如下: <a hre ...

随机推荐

  1. Tomcat端口的改变和编码的设置

    1.更改默认的端口: 在默认情况下,tomcat的端口是8080,如果出现8080端口号冲突,用如下方法可以修改Tomcat的端口号: 首先: 在Tomcat的根(安装)目录下,有一个conf文件夹, ...

  2. mysql数据库存储经度纬度

    使用float或者double会自动四舍五入,用decimal(20,17)当然你用varchar也是可以的

  3. An enumerable sequence of parameters (arrays, lists, etc) is not allo

    环境:dapper asp.net core 出错代码如下: public Task<IEnumerable<dynamic>> GetList(string query, p ...

  4. DevExpress之TreeList节点绑定图片

    最近在项目中使用到了DX中的TreeList控件绑定数据源时在每个节点前显示特点的图片:查阅相关资料实现方法如下:1.首先打开VS2010新建一个WINFROM应用程序: 2.在WINFROM应用程序 ...

  5. 用上了Godaddy的美国主机

    最近把两个域名转移到Godaddy上面后,就不停地收到它的促销邮件,送一些优惠码打折. 昨天通过它的优惠链接买了一个豪华型空间,支持无限空间,无限域名绑定. 看着邮件上写的是打半折,同时还免费送一个域 ...

  6. Nginx 的 docker 部署

    1.输入命令 docker pull nginx:1.15 拉取 nginx 的镜像: 2.使用 docker images 查看拉取到的镜像信息: 3.在主机上创建用于映射的目录 mkdir -p ...

  7. Codeforces 749C. Voting 模拟题

    C. Voting time limit per test: 1 second memory limit per test: 256 megabytes input: standard input o ...

  8. django基础使用

    //创建应用 python3 manage.py startapp mysite //开启服务 python3 manage.py runserver 127.0.0.1:8080 //创建数据库命令 ...

  9. sleep()方法和yield()方法有什么区别？

    两者都是Thread类的静态方法,定义如下 public static void sleep(long millis) throws InterruptedException public stati ...

  10. [Robot Framework] Robot Framework用Execute Javascript对XPath表示的元素执行scrollIntoView操作

    有些元素需要通过滚动条滚动才能变得可见. 如果这些元素在DOM结构里面存在,可以通过scrollIntoView让其可见,但如果在DOM结构里面不存在那就要通过拖动滚动条让其变的可见. Execute ...