页面内锚点定位及跳转方法总结

  接着上一篇,其实是一个功能,本来感觉挺简单的一个问题,没想到遇到两个坎儿,无语。。。

 

  上一篇是关于scroll事件绑定的问题,这一篇的问题是:点击锚点跳转到相应DIV的问题。

  最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:

<!DOCTYPE  html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

    这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。 

 

  第二种方式是在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦。

 

  第三种方法是用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>

  注意:运行上面的脚本的之前,先将为锚点增加相应的id,同时去掉href属性。   

     $("html, body")可以替换为响应的div,如果不起作用,试着给该div增加overflow:scroll属性。

 

     另外,脚本可以进一步优化,自己来试试

  这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。

          缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。

 

  第四种方法是用js的srollIntoView方法,直接用:

document.getElementById("divId").scrollIntoView();

  这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。

 

 

  推介大家用第四种,我依次试了前三种,都有各种问题(可能是页面较复杂的缘故吧,当然,技术不咋也是。。。)   

转载于:https://www.cnblogs.com/ictlight-moving-on-1/p/5753785.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于android的水稻叶片特征测量系统,基于Android的水稻叶片特征参数测量系统

基于Android的水稻叶片特征参数测量系统路艳1&#xff0c;肖志勇2&#xff0c;3&#xff0c;杨红云2&#xff0c;3*&#xff0c;周琼1&#xff0c;孙玉婷1【摘要】摘要&#xff1a;【目的】提供基于Android的水稻叶片特征参数测量系统&#xff0c;为农学研究提供精准数据。【方…

JAVA学习绘图颜色及其笔画属性设置字体显示文字

package com.graphics;import java.awt.*; import java.awt.geom.Rectangle2D; import java.util.Date;import javax.swing.*;/*** * author biexiansheng**/ public class DrawString extends JFrame{private Shape rect;//矩形对象private Font font;//字体对象private Date …

lightoj 1044 - Palindrome Partitioning(需要优化的区间dp)

题目链接&#xff1a;http://lightoj.com/volume_showproblem.php?problem1044 题意&#xff1a;求给出的字符串最少能分成多少串回文串。 一般会想到用区间dp暴力3个for但是这里的数据有1000&#xff0c;3个for肯定超时的。 但是这题只是判断回文串有多少个所以可以先预处理一…

对JavaFX Mobile应用程序进行性能分析

注意&#xff1a;本文最初发表于2009年&#xff0c;仅供参考。 请查阅我们其余的JavaFX文章 。 对于每个JavaFX Mobile应用程序开发人员来说&#xff0c;今天都是美好的一天。 你想知道为什么吗&#xff1f; 因为JavaME SDK 3.0已发布。 根据我午休时听到的消息&#xff0c;这是…

第六天20160810

a) 形参与实参 一、 形参为基本数据类型&#xff1a;形参改变&#xff0c;实参不变。 二、 形参为引用数据类型&#xff1a;形参改变&#xff0c;实参通常都会改变。 b) 可变长参数&#xff1a;JDK1.5开始出现 一、可变长参数只能用于…

android原生系统开发板,安卓学习必备开发板-Rayeager PX2

由谷歌主导并推动的移动终端操作系统Android&#xff0c;由于其开源开放的特性&#xff0c;自发布之日起便受到全球各大IT厂商的欢迎。在各厂商的热情推动下&#xff0c;基于Android系统的手机、平板、智能手表等各类产品层出不穷&#xff0c;迅速普及到人们的日常生活&#xf…

变量类型取值范围

ascii&#xff1a;Oct Dec Hex Char──────────────────────────101 65 41 A102 66 42 B103 67 43 C141 97 61 a142 98 62 b143 99 63 c 取值范围&#xff1a;-1 ~ 0xFFFFFFFF ~ 全1127 ~ 0x7F255 ~ 0xFF ~ 11111111 char -128 ~ 127 …

热点中的即时编译器(JIT)

即时编译器&#xff08;JIT&#xff09;的概念以及更广泛的自适应优化是除Java&#xff08;.Net&#xff0c;Lua&#xff0c;JRuby&#xff09;之外的许多语言中众所周知的概念。 为了解释什么是JIT编译器&#xff0c;我想先定义一个编译器概念。 根据维基百科&#xff0c;编译…

3.30下午

在另一台机子安装VMware workstation12和win8服务器 总是秘钥不行 很烦转载于:https://www.cnblogs.com/bgd140206314/p/6647159.html

Java并发性-任务反馈

从我 上一篇 关于java.util.concurrent包的 文章 的结尾处 摘下来 &#xff0c;这很有趣&#xff0c;有时甚至必须在并发任务启动后从它们那里获得反馈。 例如&#xff0c;假设一个应用程序必须发送电子邮件批处理&#xff0c;除了使用多线程机制外&#xff0c;您还想知道成功发…

JS中的函数(二):函数参数(你可能不知道的参数传递)

前言&#xff1a; 函数分为有参有返回值&#xff0c;有参无返回值&#xff0c;无参无返回值&#xff0c;无参有返回值&#xff1b;那么对于无参数的函数你想使用函数的调用怎么办呢&#xff1f;如果你想封装一个代码&#xff0c;实现多种功能&#xff0c;但是形参大于实参或者实…

jq查找字段忽略html标签,jQuery过滤HTML标签并高亮显示关键字的方法

本文实例讲述了jQuery过滤HTML标签并高亮显示关键字的方法。分享给大家供大家参考。具体如下&#xff1a;jQuery实现网页关键字过滤效果&#xff0c;将需要过滤的文字定义在JavaScript中&#xff0c;可定义多个&#xff0c;不过要修改JS代码为数组&#xff0c;这样可过滤出多个…

Jmeter参数化 CSV Data Set Config界面说明

Filename&#xff1a;指保存信息的文件目录&#xff0c;可以相对或者绝对路径&#xff0c;相对路径从Jmeter 的启动目录(***/bin)路径。 File Encoding:文件编码&#xff0c;默认为ANSI&#xff0c;建议设置为utf-8&#xff0c;防止遇见乱码情况。 Variable Names&#xff1a;参…

java.lang.NoClassDefFoundError:如何解决–第1部分

线程“ main”中的异常java.lang.NoClassDefFoundError是开发Java EE企业版或独立Java应用程序时可能会遇到的常见难题之一。 根本原因分析和解决过程的复杂性主要取决于Java EE中间件环境的大小。 特别是考虑到各种Java EE应用程序中存在大量的ClassLoader。 我向您建议的一系…

android 日期国际化,Flutter 日期时间选择类控件及国际化

注意&#xff1a;无特殊说明&#xff0c;Flutter版本及Dart版本如下&#xff1a;Flutter版本&#xff1a; 1.12.13hotfix.5Dart版本&#xff1a; 2.7.0DatePickerFlutter并没有DatePicker这个控件&#xff0c;需要使用showDatePicker方法弹出日期选择控件&#xff0c;基本用法如…

英式英语 vs 美式英语

0. 常见不同 日期的表达&#xff1a; 美国&#xff1a;月日年&#xff1b;英国&#xff1a;日月年&#xff1b;1. 发音 schedule&#xff0c;美 [‘skɛdʒul]&#xff0c;英 [ˈʃɛdjuːl]pecan&#xff0c;山核桃&#xff0c;英 [‘piːk(ə)n;]&#xff0c;美 [pɪ’kɑn]a…

Java多线程:线程间通信之volatile与sychronized

由前文Java内存模型我们熟悉了Java的内存工作模式和线程间的交互规范&#xff0c;本篇从应用层面讲解Java线程间通信。 Java为线程间通信提供了三个相关的关键字volatile, synchronized和final。对于final&#xff0c;我们在博文Java中static关键字和final关键字中已经介绍。 1…

避免Java中的空指针异常

空指针异常是Java中最常见&#xff0c;最烦人的异常。 在这篇文章中&#xff0c;我想避免这种不希望的异常。 首先让我们创建引发空指针异常的示例 private Boolean isFinished(String status) { if (status.equalsIgnoreCase("Finish")) { return Boolean.TRUE; …

权威发布 鸿蒙涅槃,鸿蒙涅槃 曾圣《鸿蒙》雕塑走进河北美院受追捧

原标题&#xff1a;鸿蒙涅槃 曾圣《鸿蒙》雕塑走进河北美院受追捧2019年10月20日上午10时曾圣《鸿蒙》雕塑作品展——暨河北美院首场新闻媒体发布会在河北美术学院雕塑院举办。河北美术学院校长甄忠义、河北美术学院党委书记高国忠、常务副校长张建敏、党委副书记甄心恒、副校长…

Rube GoldbergSpring整合

Spring Integration为集成系统所涉及的某些复杂性提供了非常好的抽象-Spring Integration从Integration的角度来看非常适合Facade的定义-简化了对复杂底层系统的访问。 为了说明这一点&#xff0c;请考虑一个简单的系统&#xff0c;该系统仅接收一条消息&#xff0c;然后将其发…