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. python3.x:No matching distribution found for PIL

    安装完成即可解决无法引入PIL的问题.

  2. [z]oracle 创建job

    https://www.cnblogs.com/lijiasnong/p/3382578.html alter system enable restricted session;--创建表create ...

  3. js 变量大小写

    js对变量是区分大小写的.完毕.

  4. android apk 反编译过程

    一.准备必要的工具 apktool (资源文件获取) dex2jar(源码文件获取) jd-gui  (源码查看) 以上三个文件的下载地址为:https://download.csdn.net/dow ...

  5. MySQL表的相关操作

    操作数据表之前,必须先选择相应数据表所在的数据库 mysql> USE databaseName; -- 选择数据库 查看该数据库下的数据表 mysql> show tables; 确定数 ...

  6. Java在dos界面运行java源文件编译成功，但运行虚拟机时出现错误：“找不到或无法加载主类”的问题

    (一)首先检查环境变量配置有没有问题, 1PATH为%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin; 2CLASSSPATH为.;%JAVA_HOME%\lib\dt.jar; ...

  7. 【Redis】安装及简单使用

    Redis介绍 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化 ...

  8. KM匹配板子

    /* gyt Live up to every day */ #include<cstdio> #include<cmath> #include<iostream> ...

  9. Unity2017新功能Sprite Atlas详解

    Sprite Atlas(精灵图集)Sprite Atlas 针对现有的图集打包系统Sprite Packer在性能和易用性上的不足,进行了全面改善.除此之外,相比Sprite Packer,Spri ...

  10. kbmmw 5.06.00 beta 发布

    原生.高效.可扩展.跨平台通信库来了. we are happy to announce v5.06.00 BETA of our popular middleware for Delphi and  ...