今天小编mail为大家分享的生活小常识,希望能够帮助到大家!
1、 打开Dreamweaver,创建一个新文档,并将标题更改为“回到顶部”;
2、 首先,您需要创建一个超过屏幕长度的网页,并在body和/body标记中插入以下代码:
3、 div style='width:100%; height:1500px;'/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; Width: 35px height: 42px border: 1px solid color # 000; Location: fixed; Right: 20px Bottom: 20px' Back to br/top /a
17、 效果如下:
18、 如果想要更好的效果,可以用图片代替文字链接。
19、 美化2:
20、 我们还可以给回到顶部按钮添加动画效果,让它看起来不那么突兀。
21、 在/body标记前添加代码:
22、 script type='text/javascript' src='jquery-1.11.0.min.js'/script
23、 script type='text/javascript' src='jquery.smooth-scroll.min.js'/script
24、 script type='text/javascript'
25、 $(function(){
26、 $('a').smoothScroll();
27、 })
28、 /script
29、 这里使用了两个js文件,请从附件中下载。
30、 保存文件,在浏览器中打开,点击回到顶部按钮,你会发现滚动条慢慢滚动到顶部。
31、 完整的例子放在百度网盘里。如有必要,请发电子邮件给xdhy_dn@foxmail.com。
32、 主题是“百度体验”。自动回复下载地址。
LuochuanRen.Com洛川人-综合信息门户网站,涵盖生活常识、美食、创业、体育、旅游、家居、汽车、财经、互联网、科技、房产、教育等资讯。
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们,情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!
工作时间:8:00-18:00
客服电话
17898872021
电子邮件
773537036@qq.com
扫码二维码
获取最新动态