首页 > 科普 > 回到顶部代码(回到顶部)
大家好,小活来为大家解答以上问题。回到顶部代码,回到顶部很多人还不知道,现在让我们一起来看看吧!
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、 主题是“百度体验”。自动回复下载地址。
本文到此结束,希望对大家有所帮助。
免责声明:
本文来源网友投稿及网络整合仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。投诉邮箱:1765130767@qq.com。
本文地址:https://www.wangmingwu.com/news/21163.html
- 上一篇:电光火石3如何融合(电光火石3怎么合体)
- 下一篇:盖菜罩(盖菜)
猜你喜欢:
最新文章:
- 04-21 据传 iPhone 15 包括新的青色选项和磨砂玻璃饰面
- 04-21 Nerida Conisbee:房地产价格何时会回到顶峰
- 04-21 过去10年拜伦湾房价涨幅超过360%
- 04-21 皮下:制造下一代氢气罐的公司
- 04-21 2024 现代伊兰特 N 在上海进行改头换面
- 04-21 Love's 通过收购增加了新型地点
- 04-21 John Lewis 通过补间系列改造其自有品牌
- 04-21 Halfords 称赞独特的平台 因为它预测销售额和利润将大幅增长
- 04-21 Superdrug 实体银行将于 2023 年新开 25 家门店
- 04-21 美元树股票(美元树商店股份有限公司相关内容简介介绍)
- 04-21 弟弟里法特阿萨德(里法特阿萨德相关内容简介介绍)
- 04-21 你的开心快乐(你有你开心相关内容简介介绍)
- 04-21 斯琴高丽好听的歌(观音手 斯琴高丽歌曲相关内容简介介绍)
- 04-21 纳米粒子激发对肿瘤的免疫反应但避免副作用
- 04-21 三星GalaxyS22 Note20和A535G获得4月更新
- 最新文章
- 热评文章