网页中“返回顶部”按钮的功能及样式实现

首先，需要把在页面排版顶部的标签设置为top

网页中“回到顶部”按钮的样式以及功能的实现：外层用a标签嵌套，内层设置一个div，其中包含一个图片，div设置大小以及背景颜色，然后a标签的position属性设置为fixed，然后right设置20px;bottom设置20px;且href设置此页面顶部标签的id，target设置_self（在本页面打开）（类似于<a href=”#top” target=_self”）这样按钮就处于右下角了，再点击的时候就会回到顶部

制作此按钮的源代码如下：

html代码：

<a id="top_back" href="#top" target="_self">
      <div>
          <img src="../img/top-1.png">
          <label><strong>top</strong></label>
      </div>
</a>

css代码：

#top_back{
    width:40px;
    position:fixed;
    right:20px;
    bottom:20px;
    text-decoration:none;
    text-align: center;
    color:skyblue;
}
#top_back img{
    width:100%;
}

定位位置可以自己改变

以上

希望对大家有所帮助

 

转载于:https://www.cnblogs.com/lavender-pansy/p/10272903.html