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. Bundle Adjustment---即最小化重投影误差（高翔slam---第七讲）

    一.历史由来 Adjustment computation最早是由geodesy的人搞出来的.19世纪中期的时候,geodetics的学者就开始研究large scale triangulations ...

  2. jquery的validate表单验证

    html: <form id="reg" action="123.html"> <p class="myerror"> ...

  3. Soa思想分布式服务webservice WCF

    什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上.以上是百度百科的解释,简单的说,就是一次大的操作由不同的小操作组成,这 ...

  4. string+和stringbuffer的速度比较

    public class Main{ public static void main(String[] args){ /* 1 */ String string = "a" + & ...

  5. linux 发送Post请求 json格式

    curl -H "Content-type: application/json" -X POST -d '{"text":"总体来说很不错,环境挺好的 ...

  6. istio-jaeger-spring boot调用链配置

    istio-jaeger-spring boot调用链配置 虽然,istio ingress controller已经生成了jaeger 记录所需要的信息,但是多个分布式之间没法清晰记录相互之间的依赖 ...

  7. PAT 1002 写出这个数 (20)（代码）

    1002 写出这个数 (20)(20 分) 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10^100 ...

  8. Contest with Drinks Easy

    /* Problem Statement Joisino is about to compete in the final round of a certain programming competi ...

  9. Python.tornado.0

    Tornado https://github.com/facebook/tornado http://www.tornadoweb.org/en/stable/guide/intro.html  (A ...

  10. js模态框实现原理

    <!DOCTYPE> <html> <head> <style>/* 定义模态对话框外面的覆盖层样式 */ #modal-overlay { visib ...