Realize the function

Click a label in a single page to locate in a single page and scroll smoothly to the target point. Experiment with innerHTML and V-HTML to convert a template string containing HTML into actual HTML

A label anchor point, smooth scrolling

Here we use id as the anchor point, we can also use name, but name can only jump to a tag, i.e. 1,2,3, and these must be a tag

CSS styles

  1. The a label for clicking is placed in UL and LI. Ul uses fixed position and LI floats left
  2. The div wrapped in the Wrapper is set to a certain height to generate a scroll bar
  3. Overflow :scroll; scroll-behavior: smooth;

details

The Wrapper must be set to a height otherwise the smooth transition will not work. In this example, an apparent height is used

The following code

.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;
}
Copy the code
<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>
Copy the code

Add the tag statement containing the string to the body with innerHtml

The same effect as

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
Copy the code

V-html is used in VUE

instructions

  1. The ul, li used by the anchor point is not included in the string
  2. Use V-HTML in a div instead of the template tag, because the template tag doesn’t actually end up there
  3. Pay attention to the height of each div and check for bugs by giving the div class wrapper height and allowing its child divs to overflow that height and produce scrollbars. It has been tested that you cannot generate a scrollable scrollbar in VUE without giving the Wrapper height to naturally wrap its child divs
  4. Note the use of “>>>” in the style, so that the string generated tag to provide style (I am also Baidu to, do not know there is no other method)
<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>
Copy the code