精华内容
下载资源
问答
  • 一个页面里面锚点
    千次阅读
    2021-06-11 08:03:58

    实现锚点滚动,需要两个方面的因素:1,锚,即我们点击的地方。2,目标位置,即页面需要滚动的距离。

    1 锚点 anchor

    通俗的讲就是导航,如百度百科的

    我们可以点击右侧的锚点,从而使得页面滚动到指定的位置。

    锚点相对比较容易,我们只需要在对应的位置加上事件即可,给每个需要滚动锚点加绑定滚动的方法。

    2.目标距离

    如何计算需要滚动的距离,准确定位锚点的位置,

    计算公式为:需要滚动的距离 = 滚动区域内锚点之上的所有元素的高度和

    有了锚点事件,有了需要滚动的位置点,那么剩下的就很简单了。

    锚点触发滚动事件:

    document.documentElement.scrollTop = 锚点位置点

    此时锚点定位就完成了,剩下的就是如何平滑的滚动了。

    js的滚动不比css,不能实现transform,或者animate,那么我们可以用定时器来实现,

    fn(){

    let timer = null

    clearInterval(timer)

    timer = setInterval(()=>{

    document.documentElement.scrollTop = document.documentElement.scrollTop - 50

    if(document.documentElement.scrollTop<50){

    document.documentElement.scrollTop = 0

    clearInterval(timer)

    }

    },10)

    }

    更多相关内容
  • 页面添加锚点的三种方式

    万次阅读 2018-08-31 11:10:30
    页面添加锚点的三种方式  HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定...

    页面添加锚点的三种方式

      HTML中的链接,正确的说法应该称作"锚点",它命名锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时,标记锚点是最佳的方法。  

    锚点链接对SEO的作用

      锚链接是一个非常重要的概念,在网页中增加恰当的锚链接,会让所在网页和所指向网页的重要程度有所提升,从而影响到关键词排名。锚链接对SEO的作用主要体现在以下几个方面:

      对锚链接所在的页面的作用

      正常来讲,页面中增加的链接锚链接都和页面本身有一定的关系,因此,锚文本可以做为锚链接所在的页面的内容的评估。例如:本篇文章中含有“SEO”的链接,那么,说明本篇文章和SEO有一定关系。

      对锚链接所指向页面的作用

      锚链接能精确的描述所指向页面的内容,因此,锚链接能做为对所指向页面的评估。

      锚链接对关键词排名的影响

      锚链接对于关键字排名的意义在于它可以让内容页随机链接在一起,让蜘蛛可以很好的抓取更多页面,权重也能均匀的传递,同时增强页面的相关性,最终提升网站的关键词排名。

    锚点的添加方式

      1、给锚点文本标签添加id,使用<a href="#"></a>来定位,当单击a链接时,就会跳到id为a01的p标签处;

    复制代码

    <div>
        <a href="#a01"></a>
    </div>
    <p>练习</p>
    <p>练习</p>
    <p>练习</p>
    <p>练习</p>
    <p>练习</p>
    <p id="a01">练习</p>
    <p>练习</p>

     

      这样的定位可以针对任何标签来定位。  

      2、给a标签的文本添加锚点,单击链接可跳到name为a01的a标签处;

     

    <div>
        <a href="#a01"></a>
    </div>
    <p>练习</p>
    <p>练习</p>
    <p>练习</p>
    <p>练习</p>
    <p>练习</p>
    <a name="a01" href=“#”>练习</a>
    <p>练习</p>

      使用name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用。 

        3、使用js。

    1

    <li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>

    原文章链接地址:https://www.cnblogs.com/zhangxiaopeng/p/6255750.html 

    展开全文
  • 1.常见的锚点定位效果: <a name="print">...这种方法,如果网页中有顶部固定导航栏,那么常见的锚点定位就会被遮住了部分,很难用样式弥补。于是可以考虑第二种方法 js模拟锚点跳转效果 2.js模拟

    1.常见的锚点定位效果:

    <a name="print"></a>
    <div id="print">
    <!-- HTTP请求没有 # -->
    

    <a href="#print"></a>
    <div id="print">
    <!-- HTTP请求有 # -->
    

    这种方法,如果网页中有顶部固定导航栏,那么常见的锚点定位就会被遮住了一部分,很难用样式弥补。于是可以考虑第二种方法 js模拟锚点跳转效果

    2.js模拟锚点跳转效果 见上一篇详细介绍

    这是锚点上一篇:jquery模拟锚点定位效果:锚点定位——如何设置锚点居页面顶部距离,锚点定位并距离顶部一定偏移

    但是,这样模拟url是没有#(hash)值的 如果导航有其他分页,就不容易跳回了,比如:
    在这里插入图片描述
    当前页是楼盘信息详情页,如果我想点楼盘相册,想要的效果是跳转到首页,再锚点定位到楼盘相册的位置;
    解决方案:
    html:
    给导航a标签 添加一个#锚点(与模拟锚点点击事件的class同名),后面再用js获取url的hash值,面加载后判断url 是否带有hash值,如有,侧js执行点击相应的hash 事件(附代码如下)

    <div class="listnav cenbox">
        <div class="cenbox clearfix">
            <ul class="xiangqingul">
                <li class="on">
                    <a href="#huxingmao" class="huxingmao">楼盘户型</a>
                </li>
                <li>
                    <a href="#xiangcemao" class="xiangcemao">楼盘相册</a>
                </li>
                <li>
                    <a href="#xinximao" class="xinximao">楼盘信息</a>
                </li>
                <li>
                    <a href="#mapmao" class="mapmao">位置配套</a>
                </li>
                <li>
                    <a href="#fangdaimao" class="fangdaimao">贷款计算</a>
                </li>
                <li>
                    <a href="#zixunmao" class="zixunmao">楼盘资讯</a>
                </li>
                <li>
                    <a href="#tuijianmao" class="tuijianmao">好房推荐</a>
                </li>
            </ul>
            <p class="tel">咨询电话: 400-815-8655</p>
        </div>
    </div>
    

    css:

    
    /* listnav */
    
    .listnav {
        position: relative;
        width:1200px;
        margin:0 auto;
        background: #f4e827;
    }
    
    .listnav ul {
        float: left;
        position: relative;
        width: 900px;
        display: flex;
        flex-direction: row;
    }
    
    .listnav ul.xiangqingul {
        width: 930px;
    }
    
    .listnav ul li {
        position: relative;
        padding: 0 25px;
        font-size: 20px;
        line-height: 50px;
        color: #000;
        font-weight: 500px;
    }
    
    .listnav ul li a {
        color: #000;
    }
    
    .listnav ul li.on {
        color: #3490d3
    }
    
    .listnav ul li.on a, .listnav ul li:hover a {
        color: #3490d3
    }
    
    .listnav .searchcon {
        float: right;
        position: relative;
        width: 285px;
        height: 30px;
        margin-top: 10px;
        background: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-radius: 2px;
    }
    
    .listnav .tel {
        float: right;
        margin-right: 20px;
        font-size: 20px;
        line-height: 50px;
        color: #000;
        font-weight: 500px;
    }
    
    .listnav .searchbox {
        position: relative;
        width: 240px;
        height: 30px;
        padding-left: 10px;
        font-size: 14px;
        line-height: 30px;
        color: #666;
    }
    
    .listnav .searchbox .searchinp {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        background: none;
        border: 0;
        outline: none;
    }
    
    .listnav .searchcon .searchico {
        width: 15px;
        height: 15px;
        margin: 7px 10px 0 0;
    }
    
    .listnav .searchcon .searchicoinp {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
    }
    
    

    js:

    // 锚点定位
                function topMao(target) {
                    $('html, body').animate({
                        scrollTop: $(target).offset().top - $('.topfubox').height()
                    }, 500); //130为锚点到距顶部的距离,500为执行时间
                    return false;
                }
    
                $('.huxingmao').click(function () {
                    topMao('#huxing');
                })
                $('.xiangcemao').click(function () {
                    topMao('#xiangce');
                })
                $('.xinximao').click(function () {
                    topMao('#xinxi');
                })
                $('.mapmao').click(function () {
                    topMao('#map');
                })
                $('.fangdaimao').click(function () {
                    topMao('#fangdai');
                })
                $('.zixunmao').click(function () {
                    topMao('#zixun');
                })
                $('.tuijianmao').click(function () {
                    topMao('#tuijian');
                })
    
    			//用js获取url的hash值,页面加载后判断url是否带有hash值,如有,侧js执行点击相应的hash事件
    			var hash = window.location.hash;
                if (hash != '') {
                    var hashinp = hash.substr(1, hash.length);
                    console.log(hashinp);
                    $('.' + hashinp).click();
                }
    

    另:
    页面滚动到相对应的位置时,所在的导航文字高亮显示;
    html:

    <div class="topfubox clearfix">
            <div class="topfucon cenbox clearfix">
                <div class="lefbox">
                    <div class="ltop">
                        <p class="lptit">水岸花语(A栋)</p>
                        <p class="lptxt">3室2厅1卫</p>
                        <p class="lptxt">98.88㎡</p>
                        <p class="lptxt red">155万</p>
                    </div>
                    <div class="lbom bltan" type="6">
                        <p>发送楼盘最新资料和价格到手机 </p>
                        <span class="sendinfo">立即发送</span>
                    </div>
                </div>
                <div class="rigbox">
                    <div class="tximg">
                        <img src="img/guwenpic.jpg" alt="">
                    </div>
                    <div class="namebox">
                        <p class="name">刘朝</p>
                        <p class="yongjin">佣金≤2.0%
                            <span>|</span> 美堂房产
                        </p>
                    </div>
                    <div class="daikan">
                        <span>带看</span>
                        <!-- 带看 用线上咨询插件 -->
                        <span>电话咨询</span>
                        <!-- 以后做小程序 扫码拨号 -->
                        <a class="linkover" href="#" target="_blank"></a>
                    </div>
                </div>
            </div>
            <div class="listnav cenbox">
                <div class="cenbox clearfix">
                    <ul class="xiangqingul">
                        <li class="on">
                            <a href="#huxingmao" class="huxingmao">楼盘户型</a>
                        </li>
                        <li>
                            <a href="#xiangcemao" class="xiangcemao">楼盘相册</a>
                        </li>
                        <li>
                            <a href="#xinximao" class="xinximao">楼盘信息</a>
                        </li>
                        <li>
                            <a href="#mapmao" class="mapmao">位置配套</a>
                        </li>
                        <li>
                            <a href="#fangdaimao" class="fangdaimao">贷款计算</a>
                        </li>
                        <li>
                            <a href="#zixunmao" class="zixunmao">楼盘资讯</a>
                        </li>
                        <li>
                            <a href="#tuijianmao" class="tuijianmao">好房推荐</a>
                        </li>
                    </ul>
                    <p class="tel">咨询电话: 400-815-8655</p>
                </div>
                <!-- <div class="searchcon">        
                          <div class="searchbox">
                            <input type="text" placeholder="请试试输入楼盘名或小区" class="searchinp">
                          </div>
                          <img src="img/searchico.png" alt="" class="searchico">
                        </div> -->
            </div>
        </div>
    

    css:

    
    .topfucon {
        display: none;
        height: 100px;
    }
    
    .topfubox .lefbox {
        position: relative;
        float: left;
        width: 530px;
    }
    
    .topfubox .lefbox .ltop {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }
    
    .topfubox .lefbox .ltop .lptit {
        position: relative;
        font-size: 24px;
        color: #000;
        line-height: 50px;
        margin-right: 20px;
        max-width: 220px;
        height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .topfubox .lefbox .ltop .lptxt {
        position: relative;
        font-size: 20px;
        color: #666;
        line-height: 50px;
    }
    
    .topfubox .lefbox .ltop .red {
        color: #ff3a3a;
    }
    
    .topfubox .lefbox .lbom {
        position: relative;
        display: flex;
        flex-direction: row;
        font-size: 16px;
        color: #333;
        line-height: 40px;
    }
    
    .topfubox .lefbox .lbom p {
        display: block;
        padding-left: 24px;
        background: url(../img/newhouseico.png) no-repeat 0 -198px;
    }
    
    .topfubox .lefbox .lbom span {
        color: #fff;
        padding: 0 15px;
        height: 26px;
        line-height: 26px;
        border-radius: 20px;
        background: #ff3a3a;
        margin-left: 10px;
        margin-top: 8px;
        cursor: pointer;
    }
    
    .topfubox .rigbox {
        float: right;
        position: relative;
        width: 450px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }
    
    .topfubox .rigbox .tximg {
        position: relative;
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 100%;
    }
    
    .topfubox .rigbox .tximg img {
        width: 100%;
        height: auto;
        min-height: 100%;
    }
    
    .topfubox .rigbox .namebox {
        position: relative;
        margin-left: 10px;
    }
    
    .topfubox .rigbox .namebox .name {
        font-size: 18px;
        color: #666;
        line-height: 40px;
    }
    
    .topfubox .rigbox .namebox .yongjin {
        font-size: 14px;
        color: #666;
        line-height: 30px;
    }
    
    .topfubox .rigbox .namebox .yongjin span {
        color: #999;
    }
    
    .topfubox .rigbox .daikan {
        display: flex;
        flex-direction: row;
        font-size: 16px;
        color: #fff;
        line-height: 34px;
        margin-left: 20px;
        margin-top: 28px;
    }
    
    .topfubox .rigbox .daikan span {
        display: block;
        height: 34px;
        margin-left: 10px;
        background: #ff3a3a;
        padding: 0 15px;
        border-radius: 20px;
        background: #ff3a3a;
        margin-left: 10px;
        cursor: pointer;
    }
    
    

    js:

    var topBoxTop = $('.topfubox').offset().top + 50;
            var tab_l = $('.listnav li').length;
            var tabctnOffsetTopArr = [];
            var dingweiArr = ['huxing', 'xiangce', 'xinxi', 'map', 'fangdai', 'zixun', 'tuijian'];
            $(window).scroll(function () {
                setElPosition()
            })
    
            function setElPosition() {
                var top = $(document).scrollTop();
                if (top > topBoxTop) {
                    console.log(1);
                    $('.topfubox').addClass('fixed');
                    $('.topfubox .listnav').removeClass('cenbox');
                    $('.topfubox .topfucon,.zhanwei').show();
                } else {
                    console.log(2);
                    $('.topfubox').removeClass('fixed');
                    $('.topfubox .listnav').addClass('cenbox');
                    $('.topfubox .topfucon,.zhanwei').hide();
                }
    
                var setNavBarStyle = function (el, top, arr) {
                    // if (clickSetStyle) {
                    for (var i = 0; i < arr.length; i++) {
                        if (top >= arr[i]) {
                            el.eq(i).addClass('on').siblings('li').removeClass('on')
                        }
                    }
                    // }
                }
                setNavBarStyle($('.listnav .xiangqingul li'), top, tabctnOffsetTopArr)
            }
    
    
    			$(document).ready(function () {
    				setElPosition();
    	            for (var i = 0; i < tab_l; i++) {
    	                if (dingweiArr.length > 0) {
    	                    var offsettop = $('#' + dingweiArr[i]).offset().top - 200;
    	                    tabctnOffsetTopArr.push(offsettop)
    	                }
    	            }
    	            console.log(tabctnOffsetTopArr);
    	        })
    

    思路:把页面锚点对应的板块id写入数组,页面加载 获取id距离页面顶部的高度,页面滚动事件执行,滚动到相应数组的高度值,则高亮显示相应的导航文字。

    缺点:页面中导航板块不可缺少,如某页隐藏某一板块,则。。。问题待研究。。。

    借鉴文章:https://blog.csdn.net/weixin_42839080/article/details/82825295

    展开全文
  • Vue 实现页面锚点定位

    千次阅读 2021-10-01 13:06:34
    这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。为什么会用到这个呢?因为我的页面上有3张表,数据量有点大,如果不滑动页面的话,没法展示完。也就是用户可能看不到下面的表,或者觉得滑动太麻烦了,懒...

    本文介绍2种方法

    一、利用a链接实现锚点定位

    这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。为什么会用到这个呢?因为我的页面上有3张表,数据量有点大,如果不滑动页面的话,没法展示完。也就是用户可能看不到下面的表,或者觉得滑动太麻烦了,懒得滑动了。于是我在左边添加了个侧边栏,说明我这个页面有3张表,点击侧边栏选项跳转到对应的页面位置。

    侧边栏这么写
    在这里插入图片描述
    在目标位置(也就是三个表的div)写入一个空的a标签,设置一个name属性,name属性设置必须唯一。这里可以是vital,tumor,cancer。就可以实现页面内跳转了。

    但是这么写有个bug. 就是每次点击侧边栏锚点定位表格的时候,url 也会对应的变化。也就是会从localhost:port/browser/#vital 变化到 localhost:port/browser/#tumor .然后vue监听到变化,会重新请求数据,加载数据。 也就是我的想法是 进入页面时加载数据,在跳转表格时不加载数据,但是现在变成了进入页面 ,跳转表格的时候都加载数据。

    所以这种方法跳转表格就不行了

    下面介绍方法2,恰好解决了问题。

    二、document.querySelector(“要返回地方的id”).scrollIntoView(true);

    这种方法,url不变化。

    侧边栏如下:
    在这里插入图片描述

    表格 div 中加个id属性
    在这里插入图片描述
    然后在methods里面添加个函数

    goAnchor (selector) {
      document.querySelector(selector).scrollIntoView({
        behavior:"smooth"
      })
    } 
    

    总结就是这样的:

    <a @click="goAnchor('#anchor14')">点击这里跳转</a>
    
    methods: {
                //模拟锚点跳转
                goAnchor(selector) {//参数selector是id选择器(#anchor14)
                    document.querySelector(selector).scrollIntoView({
                        behavior: "smooth"
                    });
                },
            }
    
    展开全文
  • 主要介绍了vue 导航锚点_点击平滑滚动,导航栏对应变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 聊聊页面中的锚点效果和回到顶部

    万次阅读 多人点赞 2020-12-28 11:20:27
    页面中的锚点各位想必都“了如指掌”,其基于a链接“同页面跳转”和“id属性标签的历史问题”。 可能有人不知道的是:HTML中的“id”非常神奇:id属性的元素不仅可以在js中直接使用,而不必先获取;还可以和url相...
  • 有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移
  • vue 跨页面锚点

    2019-11-29 09:33:36
    右侧有一个悬浮菜单栏是全局的,点击之后需要跳到商城的锚点,然后开始想在query里将锚点id带过去,但是页面刷新之后参数还会存在,就改用localstorage将锚点存起来了。 1.点击锚点按钮之后,将锚点id存起来再跳转...
  • 文章目录前言一、锚点二、锚点使用1. 简单实现2. 动画添加总结 前言 先前曾在浏览器对象模型 BOM中,封装了 goToPage.js 的小工具,它主要是可以实现页面的快速定位...命名锚记像一个迅速定位器一样是一种页面内的
  • 锚点进行文章定位以及返回顶部
  • vue路由页面如何加锚点

    千次阅读 2018-09-12 11:57:05
    我们在路由页面锚点的时候,经常会跟路由冲突。那么我们如何解决呢? 我们可以使用以下方法实现: @click.prevent="custormAnchor(index) &lt;div id="index"&gt;锚点内容&lt;/...
  • html增加锚点定位

    2021-06-19 10:21:16
    种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id。如下:div {height: 800px;width: 400px;border: 2px solid black;}h2 {position: fixed;margin:50px 500px;}to div1to div2to div3div1div2...
  • 锚点页面滚动事件
  • 本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下:1. 锚点跳转简介锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。锚点跳转有两种形式:a标签 + name / href...
  • 项目中需要做一个详情说明锚点定位功能,插件没有找到合适的,就打算手写一个。先看效果图。。。点击右边tab,左边的列表就会切换到对应的位置;鼠标在左边滚动或者拉动滚动条,右边的tab也会选中对应的位置。 1、第...
  • 1.目标页面设置锚点及跳转事件 <pid="demoAnchor">直播时间:2021年10月20日</p> methods:{ open(){ window.location.href='#demoAnchor'; } }, mounted(){ if(this.$route.query.active){ ...
  • html中如何链接到另一个页面

    万次阅读 2021-06-10 16:00:17
    iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topmargin上边距 扩展资料: 嵌入页面的几种方法: 一、应用框架技术 在页面中嵌入外部页面的html中怎么从一个页面跳转到另...
  • tab页通常用于切换页面,我们今天做的是点击tab标签,定位到相应位置,也就是锚点定位,所以这里的tabs并没有起到太大的作用,仅仅是样式 首先首先锚点定位: (先看看最后的样子) html部分: <div ...
  • Vue与iview结合的锚点定位跳转(当前页面跳转,url不变) 当点击菜单栏标题的某一个元素,然后跳转到页面中的某一处。 点击: 跳转: 项目是vue-cli搭建的,菜单栏用的是iView组件实现的。 @on-select:是选择菜单...
  • 一、页面内跳转的锚点设置页面内的跳转需要两步:方法一:①:设置一个锚点链接去找喵星人;(注意:href属性的属性值最前面要加#)②:在页面中需要的位置设置锚点;(注意:a标签中要写一个name属性,属性值要与①中...
  • 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式...
  • el-steps步骤条结合锚点实现页面滚动定位

    千次阅读 热门讨论 2021-10-09 15:38:54
    element中的步骤条没有任何点击事件,只是起到一个展示的作用,由于其它页面也有用到,便封装成了一个公共的组件 step中的代码: <template> <div class="step"> <div style="height: 1
  • vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案
  • <...锚点案例(锚点又叫命名锚记)</title> <link rel="stylesheet" type="text/css" href="inputAndDiv.css"> </head> <body style="background-color: #CCE8CF;"> &...
  • [code="java"]举例:1.html 第二章 2.html 第章 这样就可以实现锚点之间的链接了。[/code]
  • 06.定位与锚点

    2022-03-16 13:50:21
    CSS文档流 CSS 有三种基本的定位机制:普通流、浮动流、定位流...} 锚点 命名锚点链接的应用: 命名锚点的作用:在同一页面内的不同位置进行跳转。 制作锚标记: 1)给元素定义命名锚记名 语法: 2)命名锚记连接 语法:
  • (1)超链接用的最多,但是超链接中锚点也是被用的较多的一个功能。——先需要被跳转到的地方放一个锚点锚点其实也是一个a标签,只是这个a标签没有href属性,只有name属性,这个name属性就是它的标识,别人要跳转...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,388
精华内容 4,955
关键字:

一个页面里面锚点