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

作者:没什么大不了 | 创建时间: 2023-03-20
为了方便客户在浏览页面较长的网页时,能一键回到顶部,我们可以在网页中加入 回到顶部按钮。...
在网页中插入回到顶部按钮 回到顶部代码

操作方法

打开Dreamweaver,新建文档,把标题修改为“回到顶部”; 首先需要制造一个超出屏幕长度的网页,在 <body> 和 </body> 标签中插入以下代码: <div style="width:100%; height:1500px;"></div> 保存文件,在浏览器中打开,就可以看到浏览器右侧出现滚动条,如图:

紧跟着 <body> 标签后面,加入一行代码: <a name="top"></a> 这是一个锚链接,用于标记位置; 这里我们是回到顶部,所以锚链接的位置紧跟在 <body> 标签后面; 如果要跳到页面其他位置,就把这个锚链接放在对应的位置;

然后在 </body> 标签前加入 回到顶部按钮,代码如下: <a href="#top">回到顶部</a> 这是跳转到锚链接的代码,href属性的值为 #加上锚链接的name属性 top 保存文件,在浏览器中打开,把页面滚动到底部,点击 回到顶部就看到效果了。

美化一: 我们可以通过修改CSS,来让“回到顶部”的按钮更美观,代码如下: <a href="#top" style="display:block; width:35px; height:42px; border:1px solid #000; position:fixed; right:20px; bottom:20px;">回到<br/>顶部</a> 效果如下图: 如果想要效果更好,可以用图片代替文字链接。

美化二: 我们还可以给回到顶部按钮增加一个动画效果,让它看起来不那么突然。 在 </body> 标签前加入代码: <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.smooth-scroll.min.js"></script> <script type="text/javascript"> $(function(){ $("a").smoothScroll(); }) </script> 这里用到两个 js 文件,请从附件中下载。 保存文件,在浏览器中打开,点击回到顶部按钮,就会发现滚动条是慢慢滚动到顶部的。

点击展开全文

更多推荐