在网页中插入回到顶部按钮 回到顶部代码

在网页中插入回到顶部按钮 回到顶部代码

为了方便客户在浏览页面较长的网页时，能一键回到顶部，我们可以在网页中加入回到顶部按钮。

打开Dreamweaver，新建文档，把标题修改为“回到顶部”；

首先需要制造一个超出屏幕长度的网页，在 和 标签中插入以下代码：

保存文件，在浏览器中打开，就可以看到浏览器右侧出现滚动条，如图：

紧跟着 标签后面，加入一行代码：

这是一个锚链接，用于标记位置；

这里我们是回到顶部，所以锚链接的位置紧跟在 标签后面；

如果要跳到页面其他位置，就把这个锚链接放在对应的位置；

然后在 标签前加入回到顶部按钮，代码如下：

回到顶部

这是跳转到锚链接的代码，href属性的值为 # 加上锚链接的name属性 top

保存文件，在浏览器中打开，把页面滚动到底部，点击回到顶部就看到效果了。

美化一：

我们可以通过修改CSS，来让“回到顶部”的按钮更美观，代码如下：

回到
顶部

效果如下图：

如果想要效果更好，可以用图片代替文字链接。

美化二：

我们还可以给回到顶部按钮增加一个动画效果，让它看起来不那么突然。

在 标签前加入代码：

这里用到两个 js 文件，请从附件中下载。

保存文件，在浏览器中打开，点击回到顶部按钮，就会发现滚动条是慢慢滚动到顶部的。

完整的例子放在百度网盘中，需要的请发邮件到 xdhy_dn@foxmail.com

主题写 “百度经验”。自动回复下载地址。