JS页面锚点滑动

Myth丶恋晨 2022-07-13 08:54 172阅读 0赞

//主页面

<html>

<head>

</head>

<body>

<div id='s\_1' ></div>

<div id='s\_2' ></div>

<div id='s\_3' ></div>

<div id='s\_4' ></div>

</body>

</html>

<div class="scrollBar">  
<div class="scroll\_item">  
<a class="common\_scroll scroll\_1 scroll\_now" href="\#s\_1">  
<span class="icon iconfont">&\#xe613;</span>  
<span class="text">基本情况</span>  
</a>  
<a class="common\_scroll scroll\_2" href="\#s\_2">  
<span class="icon iconfont">&\#xe633;</span>  
<span class="text">个人信息</span>  
</a>  
<a class="common\_scroll scroll\_3" href="\#s\_3">  
<span class="icon iconfont">&\#xe600;</span>  
<span class="text">服务对比</span>  
</a>  
<a class="common\_scroll scroll\_4" href="\#s\_4">  
<span class="icon iconfont">&\#xe62e;</span>  
<span class="text">作品对比</span>  
</a>  
<a class="common\_scroll scroll\_5" href="\#s\_5">  
<span class="icon iconfont">&\#xe6c1;</span>  
<span class="text">经历对比</span>  
</a>  
</div>  
  
</div>

JS

$(".common\_scroll").click(function() \{  
var h=$($(this).attr("href")).offset().top;  
    $("html, body").stop(true,false).animate(\{  
      scrollTop: h +"px"  
   \}, \{  
    duration: 500,  
      easing: "swing"  
   \});  
    return false;  
 \});

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue页面内部定位到锚点位置

上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方

谁践踏了优雅/ 2023年06月15日 06:41/ 0 赞/ 19 阅读

相关 js 模拟锚点跳转

使用scrollIntoView // 找到锚点 let anchorElement = document.getElementById(anchorNa

忘是亡心i/ 2022年12月01日 05:17/ 0 赞/ 205 阅读

相关 js跳转到锚点

1，在页面添加location.hash可实现无论哪个页面跳到该页面都跳到固定位置。 <script language="[JavaScript][]">

雨点打透心脏的1/2处/ 2022年07月16日 11:12/ 0 赞/ 315 阅读

相关 JS页面锚点滑动

//主页面 <html> <head> </head> <body> <div id='s\_1' ></div> <div id='s\_2' ></div>

Myth丶恋晨/ 2022年07月13日 08:54/ 0 赞/ 173 阅读

相关页面添加锚点的三种方式

页面添加锚点的三种方式　　HTML中的[链接][Link 1]，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，

谁借莪１个温暖的怀抱￠/ 2022年05月14日 01:38/ 0 赞/ 319 阅读

相关 gitbook maekdown页面间锚点跳转

作者：LoveEmperor-王子様在目标页面添加锚点,例： > 在HTML里添加唯一id ![在这里插入图片描述][watermark_type_ZmFuZ3p

喜欢ヅ旅行/ 2022年04月17日 05:41/ 0 赞/ 426 阅读

相关 vue跨页面锚点跳转

> 从theindex.vue跳转到investment.vue,`红色部分就是写入的地方` > theindex.vue ![在这里插入图片描述][watermark_t

偏执的太偏执、/ 2021年12月10日 07:39/ 0 赞/ 563 阅读

相关 angular7项目中使用页面锚点

在angular项目中使用页面锚点，原生的html锚点的时候会页面跳转或者找不到路由。可以使用以下方式解决： html <div class="circle_l

缺乏、安全感/ 2021年10月18日 05:43/ 0 赞/ 536 阅读

相关锚点

$('.kk').on('click', function(e) { var thisId = $(this).attr('id');

男娘i/ 2021年09月19日 11:16/ 0 赞/ 442 阅读

相关 html 锚点

锚点: 在一张网页中进行资源跳转 <a href="锚点名">点击访问名称</a> 跳转到锚点name处 <a name=

我不是女神ヾ/ 2021年07月24日 22:22/ 0 赞/ 493 阅读