js锚点

锚点,在地址栏http://localhost:8000/Demo1/js锚点.html#a   跳转到指定位置可以是 <a>标签的name 也可以是标签的id。

曾经看到有锚点的页面,但在代码里看不到name或id为那个锚点的标签,很是费解。在网上一顿查,原来可以使用 window.location.hash 这个便是获取或设置锚点。这难道又是基础不扎实的表现吗?w3school上面是有这东西。

看代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js锚点</title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#demo a").on("click", function () {
                var self = $(this);
                var hash = self.attr("href").split(‘#‘)[1];
                window.location.hash = "m-" + hash;
            });
        });
    </script>
</head>
<body>
    <div id="demo">
        <a href="#a">跳转A</a>
        <a href="#b">跳转B</a>
    </div>
    <div style="height: 500px;background-color: #00ced1"></div>
    <div id="m-a" style="height: 200px;background-color: #b6ff00">

    </div>
    <div id="m-b" style="height: 200px;background-color: #808080">

    </div>
</body>
</html>

还有个小问题,地址栏有锚点时 F5刷新 页面不会跳转到指定位置,可以这么搞一下。

$(function () {
            var hash = window.location.hash;
            var id = hash.split(‘#‘)[1];
            if (id) {
                var t = $(‘#m-‘ + id).offset().top;
                $(window).scrollTop(t);
            }
        });

这样就能刷新跳过去了。这个方法还可以改造下,加个动画,点了锚点以后让页面慢慢的走到锚点。

js锚点,布布扣,bubuko.com

时间: 2024-10-27 09:48:33

js锚点的相关文章

html中锚点的使用

如今总结一下控制锚点的几种情况: 1. 在同一页面中 [html] view plaincopy <a name="add"></a><!-- 定义锚点 --> <a href="#add">跳转到add</a> 2. 在不同页面中.锚点定位在a.html中,从另外一个页面的链接跳转到这个锚点 [html] view plaincopy <a href="a.html#add"&g

Vue爬坑之旅(八):vue单页面中锚点跳转

一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号.但是在单页面中会有路由误判的情况.所以在单页面中锚点可改为参数传递的方式. 一.封装一个外部js:anchor.js //锚点跳转 function goAnchor(selector) { var anchor = this.$el.querySelector(selector);//获取元素 if(anchor) { setTimeout(()=>{//页面没有渲染完成时是无法滚动的,因此设

Jquery分页功能

Jquery代码 /// <reference path="jquery-1.9.1-vsdoc.js" />//锚点var anchor="#apage";$(function(){    pagerFun();    $("#btnSearch").click(function(){        var name=$.trim($("#txtHospitalName").val());        var

1HTML基础

HTML 超文本标记语言 html + css + js == 结构 + 表现 + 行为 特点 (1)HTML不需要编译,直接由浏览器执行 (2)HTML文件是一个文本文件 (3)HTML文件必须使用html或htm为文件名后缀 (4)HTML大小写不敏感 HTML基本结构 head头信息网页不显示 标签 双标签<head></head> 单标签<hr/> <title>标签即使在<body>中也不会显示. 元素 标签头.内容和标签尾组成元素,头

基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面效果. 2.插件源代码: /* * 作者:孟繁贵 * 2017-08-25 * 版本:1.0 */ jQuery.anchorScroll = function(elem1, elem2) { var currObj, offsetTop = 0, h2List = new Array(), h3L

页面回到顶部的三种实现(锚标记,js)

本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能. 本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.jb51.net/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.jb51.net/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选

js 定位到某个锚点

js 定位到某个锚点 html页面内可以设置锚点,锚点定义 Html代码   <a name="firstAnchor">&nsbp;</a> 锚点使用 Html代码   <a href="#firstAnchor">跳至第一个锚点</a> 但对于js呢,在js中如何在完成一个操作后跳至页面的某个固定锚点呢 js中location.href可以跳转至某个url: 跳至(定位到)某个固定锚点的办法 1.locat

html 锚点(超链接跳转和js中跳转)

超链接跳转同页面: <a href="#q1">问题一?</a> <a href="#q1">问题二?</a> <a href="#q1">问题二?</a> <a name="q1">问题一的解答</a> 不同页面: a.html的内容 <a href="b.html#q1">问题一?</a&g

js做通讯录的索引滑动显示效果和滑动显示锚点效果

只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可. 这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知.可以去试下. index为索引div