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. 32-改变eclipse默认的Tomcat部署路径

    转载:https://www.cnblogs.com/helf/p/9433588.html eclipse中默认的项目部署路径是在项目的路径,不像myeclipse那样部署后项目在Tomcat的安装 ...

  2. 检测Android手机的IP地址

    package com.jason.demo.androidip; import android.content.Context; import android.net.DhcpInfo; impor ...

  3. input，textarea在ios和Android上阴影和边框的处理方法（在移动端）

    1.去掉ios上阴影的方法只需要在css文件上添加input,textarea{-webkit-appearance: none;}就可以了 2.在移动端上input和textarea边框问题,也是在 ...

  4. python collections 里面的Counter 统计所有出现的字符数量

    from collections import Counter c_num = Counter('Hello world') # 统计出现的每个字符数量print(c_num) for key, va ...

  5. python 数据类型 之 tuple 元组

    python 3.6.5 元组的特性和定义 与列表类型 只不过 [  ] 改成了() 特性: 1.不可变(元组本身不可变,但是可以存可变类型的element){猜测因为可变element的地址不可变而 ...

  6. Linux netstat

    一.简介   二.语法   三.实例 1)查看TCP连接数 netstat -n | awk '/^tcp/ {++S[$NF]} END {for (a in S) print a, S[a]}'

  7. Linux ulimit

    一.简介   二.语法   三.其他 1)linux下进程的进程最大数.最大线程数.进程打开的文件数和ulimit命令修改硬件资源限制 http://blog.csdn.net/gatieme/art ...

  8. Pandas设置值

    1.创建数据 >>> dates = pd.date_range(', periods=6) >>> df = pd.DataFrame(np.arange(24) ...

  9. 大神的P图过程！快来偷窥！

    来自美国的艺术家James(@jameasons) 平时我们总是能看到一些大神合成出这样的图片, 但是他们P图的过程是怎样的,很多人都是不知道的. 接下来再看看这位大神的其他作品, 如果你看了上面视频 ...

  10. python爬虫之urlError异常处理

    1.URLError URLError产生的原因: (1)网络无连接,即本机无法上网 (2)连接不到特定的服务器 (3)服务器不存在 import urllib.request import urll ...