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. ret和retf

    ret指令用栈中的数据,修改IP的内容,从而实现近转移; retf指令用栈中的数据,修改CS和IP的内容,从而实现远转移. CPU执行ret指令时,进行下面两步操作: (IP) = ((ss)*16+ ...

  2. php5.6 版本出现 Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version 的错误

    解决方法是修改php.ini配置: ;always_populate_raw_post_data = -1 把前面的分号去掉 always_populate_raw_post_data = -1 然后 ...

  3. win下apache的error.log和access.log文件过大

    在httpd.conf中修改ErrorLog和CustomLog的配置 ErrorLog "|E:/apache2.2/bin/rotatelogs.exe E:/apache2.2/log ...

  4. sharpsvn 继续,解决文件locked 问题,

    方法中少个方法就会出现一些问题. 比如进行了断线测试,结果再操作时就出现了文件被锁的情况,最终查了官网的论坛,才得以解决 How to unlock if the working copy is lo ...

  5. C++中 左值和右值的区别

    总结: C++11中所有的值属于左值,右值两者之一. 左值引用:指的是可以放在赋值表达式左边的事物——在堆上或者栈上分配的命名对象或者其他对象成员——有明确的内存地址. 对左值的const引用创建临时 ...

  6. 函数调用的四种方式 和 相关的 --- this指向

    this:表示被调用函数的上下文对象. arguments:表示函数调用过程中传递的所有参数. 这两个参数都是隐式的函数参数.会静默传递给函数,并且和函数体内显式声明的参数一样可正常访问. argum ...

  7. nginx + fastdfs 的开机自启动

    虚拟机每次启动之后都要重新启动一下fastdfs 和 nginx服务,比较麻烦,所以增加开机自启动: 编辑 /etc/rc.d/rc.local 文件,增加启动项: 1.编辑文件 vim /etc/r ...

  8. Luogu 2147 洞穴勘测 - LCT

    Solution $LCT$ 打上 $cut$ , $link$ 和 $finroot$ 即可 Code #include<cstdio> #include<cstring> ...

  9. Python GUI中 text框里实时输出

    首先GUI中不同函数的局部变量的问题. 发现不同button定义的函数得到的变量无法通用. 通过global 函数内的变量可以解决这个问题 def openfiles2(): global s2fna ...

  10. Eclipse生成部署描述符（web.xml）

    右键点击你的web项目名--->Java EE Tools-->Generate Deployment  Descriptor Stub 要想自动生成,只需在创建web项目时,把最后一页的 ...