a标签锚点,平滑滚动,innerHtml,v-html
实现功能
单页中点击a标签实现单页中的定位,并平滑滚动到目标点。 试验innerhtml与v-html将包含html的模板字符串转化为真实html,依旧达到以上功能
a标签锚点,平滑滚动
这里使用id作为锚点,听说也可以使用name,不过name只能跳转a标签,即1,2,3、、这些得是a标签
CSS样式
- 用于点击的a标签放入ul,li中,ul使用fixed定位,li左浮动
- wrapper包裹的div都设置一定的高度,使产生滚动条
- 平滑滚动样式: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
说明
- 锚点用到的ul,li不包含进字符串中
- 在一个div中使用v-html,而不是在template标签中使用,因为template标签实际上最后是不存在的
- 注意每个div的高度,排查bug,使class为wrapper的div有高度,让其包含的子div能溢出该高度,产生滚动条。这里测试到,如果不给wrapper指定高度,让其自然包裹子div,vue中是不能生成能滚动的滚动条的
- 样式中注意">>>"的使用,这样才能给字符串生成的标签提供样式(我也是百度来的,不知道还有没有其他方法)
<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>
转载自:https://juejin.cn/post/6985106235729117197