likes
comments
collection
share

a标签锚点,平滑滚动,innerHtml,v-html

作者站长头像
站长
· 阅读数 29

实现功能

单页中点击a标签实现单页中的定位,并平滑滚动到目标点。 试验innerhtml与v-html将包含html的模板字符串转化为真实html,依旧达到以上功能

a标签锚点,平滑滚动,innerHtml,v-html

a标签锚点,平滑滚动

这里使用id作为锚点,听说也可以使用name,不过name只能跳转a标签,即1,2,3、、这些得是a标签

CSS样式

  1. 用于点击的a标签放入ul,li中,ul使用fixed定位,li左浮动
  2. wrapper包裹的div都设置一定的高度,使产生滚动条
  3. 平滑滚动样式:overflow:scroll;scroll-behavior: smooth; 细节

wrapper得给他设置个高度,否则平滑过渡效果表现不出来。本例中使用一个视高

代码如下

.wrapper div{
    height:500px;
    font-size:50px;
    color:red;
}
.wrapper{
    height: 100vh;
    overflow:scroll;
    scroll-behavior: smooth;
}
ul,li{
    list-style: none;
}
ul{
    position:fixed;
    margin:auto;
    top:100px;
    left:300px;
}
li{
    float: left;
    margin:0 10px;
    font-size: 30px;
}
<ul>
    <li><a href="#div1">div1</a></li>
    <li><a href="#div2">div2</a></li>
    <li><a href="#div3">div3</a></li>
    <li><a href="#div4">div4</a></li>
    <li><a href="#div5">div5</a></li>
    <li><a href="#div6">div6</a></li>
</ul>
<div class="wrapper">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>

将包含字符串的标签语句用innerHtml加入到body

效果一样

const html = `<ul>
    <li><a href="#div1">div1</a></li>
    <li><a href="#div2">div2</a></li>
    <li><a href="#div3">div3</a></li>
    <li><a href="#div4">div4</a></li>
    <li><a href="#div5">div5</a></li>
    <li><a href="#div6">div6</a></li>
</ul>
<div class="wrapper">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
</div>`
document.body.innerHTML = html

vue中使用v-html

说明

  1. 锚点用到的ul,li不包含进字符串中
  2. 在一个div中使用v-html,而不是在template标签中使用,因为template标签实际上最后是不存在的
  3. 注意每个div的高度,排查bug,使class为wrapper的div有高度,让其包含的子div能溢出该高度,产生滚动条。这里测试到,如果不给wrapper指定高度,让其自然包裹子div,vue中是不能生成能滚动的滚动条的
  4. 样式中注意">>>"的使用,这样才能给字符串生成的标签提供样式(我也是百度来的,不知道还有没有其他方法)
<template>
  <div class="other-container">
    <ul>
      <li><a href="#div1">div1</a></li>
      <li><a href="#div2">div2</a></li>
      <li><a href="#div3">div3</a></li>
      <li><a href="#div4">div4</a></li>
      <li><a href="#div5">div5</a></li>
      <li><a href="#div6">div6</a></li>
    </ul>
    <div v-html="html" class="wrapper"></div>
  </div>
</template>

<script>
export default {
  name: "other",
  data() {
    return {
      html: `<div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>`,
    };
  },
};
</script>

<style scoped>
.other-container {
  height: 100%;
}
.wrapper {
  height: 100%;
  overflow: scroll;
  scroll-behavior: smooth;
}
.wrapper >>> div {
  height: 500px;
  font-size: 50px;
  color: red;
}
ul,
li {
  list-style: none;
}
ul {
  position: fixed;
  margin: auto;
  top: 100px;
  left: 300px;
}
li {
  float: left;
  margin: 0 10px;
  font-size: 30px;
}
</style>