css 右侧锚 |css 元素以底边为参照

/* 设置右侧锚 */
.anchor {
position: fixed;
top: 50%; 
right: 0;
transform: translateY(-50%); 
z-index: 999;
}
/* 设置右侧锚的样式 */
.anchor a {
display: block;
text-align: center;
margin-top: 10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
background-color: #666;
color: #fff;
font-size: 14px;
text-decoration: none;
}
/* 设置锚点的样式 */
.anchor .anchor-link {
position: absolute;
left: -60px;
top: 50%;
transform: translateY(-50%);
width: 60px;
text-align: center;
font-size: 14px;
color: #666;
cursor: pointer;
}

上面的代码中，大家先通过设置position属性来将锚固定在页面的右侧，然后使用transform属性和margin来让锚处于垂直居中的位置。接着设置锚点样式和位置，让用户可以点击锚点快速跳转到需要查看的内容。

在实际的项目中，大家还可以通过JavaScript来实现锚点的平滑滚动效果，让用户更加舒适地浏览网页。另外，需要注意的是，当页面内容发生变化时，大家也需要对锚点位置进行重新计算，以确保其正常使用。