精华内容
下载资源
问答
  • 锚点跳转——从一个页面跳转到当前页面的某一个位置,也可以跳转到其他页面的某一位置。 页面跳转 <!--超链接:a标签用于实现页面跳转,href是引入跳转的路径,  使用target="_blank"实现链接...

    今天分享一下,页面跳转和锚点跳转。

    页面跳转——也叫超链接跳转页面,从一个页面跳转到另外一个页面;

    锚点跳转——从一个页面跳转到当前页面的某一个位置,也可以跳转到其他页面的某一位置。

    页面跳转

    <!--超链接:a标签用于实现页面跳转,href是引入跳转的路径,
            使用target="_blank"实现链接内容在新页面打开,默认是在当前页面打开-->
            <a href="https://www.baidu.com/" target="_blank" name="three">百度</a>
            <a href="https://www.baidu.com/"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif"/></a>

     锚点跳转

     跳转到当前页面的某一个位置——

    锚点实现
            (1)找到所要点击的内容,用a包裹所要点击的内容,href=索要跳转的名字
            <a href="#锚点名字"></a>
            (2)找到所要跳转的内容,用a包裹所要跳转的内用,取name属性
            <a href="" name=""></a>

    新建文件01.html

    <!DOCTYPE html>
    <!--文档头:告诉浏览器,用哪一种方式编译代码-->
    <!--1、标签含义:标记,元素;
    2、标签结构:
    双标签:<标签名></标签名>
    单标签:<标签名>或</标签名>-->
    <html>
    	<!--放置配置文件-->
    
    	<head>
    		<!--字符集:编码方式-->
    		<meta charset="utf-8">
    		<!--网站标题-->
    		<title></title>
    		<!--引入网站标题缩略图-->
    	</head>
    
    	<body>
    		<!--网站内容-->
    		<!--<标签名  k="">k属于标签属性,不分先后-->
    		<!--一、img有3个基本属性:src、alt、title。
    			1、src:图片路径,路径分为:绝对路径,相对路径。
    			01、绝对路径:某个盘下的XXX,例如:
    			02、相对路径:相对于当前文件寻找的路径
    			2、alt:当图片像是不出来的时候,才显示出来的提示文字。
    			一般都要加(seo--浏览器搜索优化,浏览器搜索图片是根据alt和title)。(w3c官网中:鼠标移入提示文字,但暂时没测出来)
    			3、title:当鼠标移到图片上时,显示提示文字。-->
    
    		<h2>尹毓恪</h2>
    		<!--锚点实现
    		(1)找到所要点击的内容,用a包裹所要点击的内容,href=索要跳转的名字
    		<a href="#锚点名字"></a>
    		(2)找到所要跳转的内容,用a包裹所要跳转的内用,取name属性
    		<a href="" name=""></a>
    		-->
    		<p>尹毓恪拥有柔和的五官,很好的嗓音条件以及令人惊艳的唱功
    			<a href="#first"><sup>[1]</sup></a>
    		</p>
    		<p>尹毓恪被誉为“仙嗓少年”,在一组写真中,他身穿一身白色长袍,将天使少年的“纯真无邪”一览无余。
    			<a href="#second"><sup>[2]</sup></a>
    		</p>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br>
    		<ol type="1">
                <li><a href="https://www.baidu.com/" target="_blank" name="three">百度</a></li>
    			<li>
    				<a href="" name="first">“80后”老将夺冠《2017快乐男声》 感谢老天终眷顾 </a>
    			</li>
    			<li>
    				<a href="" name="second">从快男到《这就是歌唱》 尹毓恪让罗志祥等了一整年 </a>
    			</li>
    		</ol>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br>
    
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    		<br><br><br><br><br><br><br><br>
    	</body>
    
    </html>
    

    跳转到其他页面的某一位置

    新建文件02.html

    跳转到另一页面的某一位置,只需要在跳转路径后面+#+锚点名(name)即 ——路径+#name

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<!--跳转另一页面的某一个锚点-->
    		<a href="01.html#three">我是页面二,我要跳转到页面一,百度那里</a>
    	</body>
    </html>
    

     

     

    展开全文
  • Vue页面锚点跳转

    千次阅读 2020-03-14 05:11:02
    在vue项目中,在导航栏内用href跳转页面,刷新后页面消失 刷新前: 刷新后: 解决 html: <ul> <li><a @click="jump('#project')">作品展现</a></li> </ul> js: methods: {...

    问题

    在vue项目中,在导航栏内用href跳转页面,刷新后页面消失

    刷新前:

    图片

    刷新后:

    图片

    解决

    html:

    <ul>
      <li><a @click="jump('#project')">作品展现</a></li>
     </ul>
    

    js:

    methods: {
    const downloadEle = document.querySelector('#nav')
    if (!!downloadEle) {
    downloadEle.scrollIntoView(true) // true 是默认的
    }
    document.querySelector('#project').scrollIntoView(true)
    }
    

    注:

    #nav为起点页面id,此处为导航栏id

    #project为终点页面id

    效果图:

    图片

    url上不会出现页面id,刷新后页面不会消失

    展开全文
  • jq实现页面锚点滚动跳转 $(function(){ $('a[href*=#],area[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location....

    jq实现页面中锚点滚动跳转

    $(function(){  
      $('a[href*=#],area[href*=#]').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
          var $target = $(this.hash);
          $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
          if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body').animate({
              scrollTop: targetOffset
            },
            1000);
            return false;
          }
        }
      });
    })

    完美!!

    转载于:https://www.cnblogs.com/Mr-W/p/7324812.html

    展开全文
  • vue 跨页面锚点

    2019-11-29 09:33:36
    右侧有一个悬浮菜单栏是全局的,点击之后需要跳到商城的锚点,然后开始想在query里将锚点id带过去,但是页面刷新之后参数还会存在,就改用localstorage将锚点存起来了。 1.点击锚点按钮之后,将锚点id存起来再跳转...
    • 右侧有一个悬浮菜单栏是全局的,点击之后需要跳到商城的锚点,然后开始想在query里将锚点id带过去,但是页面刷新之后参数还会存在,就改用localstorage将锚点存起来了。

    1.点击锚点按钮之后,将锚点id存起来再跳转页面

        localStorage.setItem('mallId', 'gift');
        this.$router.push(path);
    

    2.在商城页面的mounted里面判断缓存里是否有锚点id,有就跳转到锚点。监听页面刷新时删除锚点

    mounted() {
            let selectId = localStorage.getItem('mallId');
            if (selectId) {
                this.$nextTick(() => {
                   let anchor = document.querySelector('#' + selectId);
                   let total = anchor.offsetTop;
                    document.body.scrollTop = total;
                    document.documentElement.scrollTop = total;
                });
                window.addEventListener('beforeunload', this.removeSelectId);
            }
        },
        methods:{
         removeSelectId() {
                localStorage.removeItem('mallId');
            }
        }
    

    3.页面销毁时删掉锚点,移除刷新事件监听

     destroyed() {
            this.removeSelectId();
            window.removeEventListener('beforeunload', this.removeSelectId);
        }
    

    4.感觉给锚点加一点动画比较自然。。动画效果使用的一个大佬的代码,链接:https://www.cnblogs.com/shaozhu520/p/10131268.html的。

    展开全文
  • 聊聊页面中的锚点效果和回到顶部

    万次阅读 多人点赞 2020-12-28 11:20:27
    页面中的锚点各位想必都“了如指掌”,其基于a链接“同页面跳转”和“id属性标签的历史问题”。 可能有人不知道的是:HTML中的“id”非常神奇:id属性的元素不仅可以在js中直接使用,而不必先获取;还可以和url相...
  • 文章目录前言一、锚点二、锚点使用1. 简单实现2. 动画添加总结 前言 先前曾在浏览器对象模型 BOM中,封装了 goToPage.js 的小工具,它主要是可以实现页面的快速定位...命名锚记像一个迅速定位器一样是一种页面内的
  • 每天学一个jquery插件-做锚点吸顶3
  • 跳转按钮 <div @click="linkHref('ID1')"></div> <div @click="linkHref('ID2')">...跳转锚点 <div id="ID1"></div> <div id="ID2"></div> <div id="ID3"></.
  • 但与一般的点击列表中的一条数据跳转至相应的详情页不同,这里首先明确的是所有的详情也是类似列表一样的效果都在一页中,也就是说点击列表的一个就要跳转到详情页里面对应的详情位置上,类似锚点的效果。...
  • html页面内跳转的锚点设置

    千次阅读 2019-03-05 15:56:32
    ①:设置一个锚点链接&lt;a href="#xx"&gt;去找信息&lt;/a&gt;;(注意:href属性的属性值最前面要加#) ②:在页面中需要的位置设置锚点&lt;a name="xx"&gt;&...
  • 方法写在子页面上: ParentBody.find("a").each(function () { var link = $(this); //获取当前元素的href属性值 并保存在变量href中 ... //如果有属性值并且属性值的第一个字符是# if (href && href[0
  • iframe之间实现锚点功能

    千次阅读 2015-01-21 22:34:13
    1、当一个页面之间实现锚点功能时候可以通过如下方式实现: 1、《热爱生命》1、《热爱生命》 2、两个页面之间实现锚点功能,可以通过如下方式实现  1、《热爱生命》 1、《热爱生命》 3、两个iframe之间实现...
  • HTML锚点链接

    2020-07-30 21:59:10
    什么是锚点链接? 锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的...在要被跳转的页面里面设置锚点 <a name=
  • 锚点链接

    2017-12-29 16:26:00
    何为锚点链接?这里引用一下百度百科里面对于锚点链接的介绍:锚点链接(也叫书签链接)常常用于那些内容庞大... 例如,在一个具有很多内容的页面中,想点击某个词或某一句话后跳转到指定的内容,使用锚点链接是...
  • 锚点定位

    2019-10-31 23:03:25
    1. 例如我们在做一个很长的网页时,需要在页面内做一个导航,点击导航里的链接不是新开一个窗口或者跳转到其他网址,而是跳转到当前页的某一个位置。那么所要跳转到的那个位置,我们就叫做锚点,它是一种在页面内...
  • 之前做一个项目,里面一个页面,扁平展开,显示客户相关的所有数据,为了使这些数据更容易理解,使用了表格从上往下将相关内容分组,因为页面拉的较长,就给每一组加了一个锚点然后,在一个FORM处理页面中,更新完数据库后,...
  • html 锚点的使用

    2015-01-12 14:42:53
    我目前了解到的锚点作用有两个方面的用途,一个是本页面上的跳转,另一个就是跳转到另外一个页面 其实锚点只需name就可以实现两个链接直接的跳转 1、本页面锚点应用示例:    跳到002 ...文字省略  跳...
  • 关于锚点导致页面参数丢失的问题

    千次阅读 2011-01-12 16:13:00
    问题描述页面上有一个指向本页面锚点的链接,点击之后导致页面重新加载,而原来在url中的参数丢失如一个页面的链接是http://127.0.0.1/app/a.jsp?arg1=a&arg2=b点击锚点连接后应该指向...原因 标签为页面上的所有链接...
  • $(window.frames["J_iframe"].document).find("xxx").offset().top 为什么获取不到iframe中标签的位移高度,怎样才能获取到,有谁知道吗
  • http://hi.baidu.com/alloy/blog/item/3219a7ef06731613fcfa3c29.html很多时候,我们在HTML里面会用anchor来实现页面内的跳转具体的实现方法太简单了……我就不提了但是,如果我们想要在跳转前或者后执行某些...
  • 锚点使用

    千次阅读 2014-04-10 20:27:16
    比如我们有一个网页很长很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。...
  • asp页面重新绑定滚动条和锚点

    热门讨论 2018-05-09 16:19:43
    其实Asp.net中page对象就有一个属性可以使页面提交或者更新数据后,返回页面原来位置,包括滚动条位置都可以保存。 &lt;%@ Page Language="C#" MasterPageFile="~/common.Master" Auto...
  • 锚点功能

    2018-04-24 14:45:24
    锚点可以实现在页面内跳转的功能,它的应用场景是在一些说明性比较强的网页中,比如网站协议、网站助手、网站使用手册等等。需要注意的是,锚点的跳转必须是两a标签之间的跳转。示例如下:&lt;a class="...
  • 然后我发现锚点图和目录都在同一个图上面,所以就一起用了. 返回顶部锚点: 我用以前旧版bilibili的那个函数.可以做到平滑滚动到页面,并且在触顶前不能向下滚屏.具体的看我参考链接.当然因为涉及到js要申请权限,简单的...
  • 一、页面内跳转的锚点设置页面内的跳转需要两步:方法一:①:设置一个锚点链接去找喵星人;(注意:href属性的属性值最前面要加#)②:在页面中需要的位置设置锚点;(注意:a标签中要写一个name属性,属性值要与①中...
  • 解决不同页面间(不同页面是iframe框起来的)<a>标签锚点功能的实现。 我的目录结构:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190513175519717.png?x-oss-process=image/watermark,type_ZmFuZ3...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,070
精华内容 4,028
关键字:

一个页面里面锚点