1、打开Dreamweaver，创建一个新文档，并将标题更改为“回到顶部”；


(相关资料图)

2、首先，您需要创建一个超过屏幕长度的网页，并在body和/body标记中插入以下代码：

3、div style=" width:100%；高度：1500像素；"/div

4、保存文件，在浏览器中打开，在浏览器右侧可以看到一个滚动条，如图：

5、在body标记之后，立即添加一行代码：

6、a name="top"/a

7、这是一个标记位置的锚点链接；

8、我们这里是回到顶部，所以锚链接位于body标签的紧后面；

9、如果你想跳转到页面的其他部分，把这个锚链接放到疤痕对应的位置；

10、然后在/body标签前添加一个按钮，代码如下：

11、a href="#top"回到顶部/a

12、这是跳转到锚链接的代码，href属性的值是锚链接的name属性top。

13、保存文件，在浏览器中打开它，将页面滚动到底部，然后单击查看效果。

14、美化一个：

15、我们可以修改CSS使按钮“回到顶部”更漂亮。代码如下：

16、a href=" # top " style=" display:block；宽度：35px高度：42px边框：1px纯色# 000；位置：固定；右：20px底部：20px"返回br/顶部/a

17、效果如下：

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

19、美化2:

20、我们还可以给回到顶部按钮添加动画效果，让它看起来不那么突兀。

21、在/body标记前添加代码：

22、脚本类型=" text/JavaScript " src=" jquery-1 . 11 . 0 . min . js "/script

23、Script type="text/javascript "有趣的src=" jquery . smooth-scroll . min . js "/script

24、脚本类型="文本/javascript "

25、$(function(){

26、$("a ")。smooth scroll()；

27、})

28、/脚本

29、这里使用了两个js文件，请从附件中下载。

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

31、完整的例子放在百度网盘里。如有必要，请发电子邮件给xdhy_dn@foxmail.com。

32、主题是“百度体验”。自动回复下载地址。

本文到此结束，希望对大家有所帮助。

关键词：