欢迎,感谢你能来...

找到回家的路:
首页 > 前端分享 > CSS3/HTML5 > html滑动到顶部
CSS3/HTML5

html滑动到顶部

作者:Fanda 发布日期:2016-04-23 围观人数:1125人

简介

html到顶部有很多种: 最简单的就锚链接,页面顶部放置: <a name=”top” id=”top”></a> 放置位置在 标签之后随便找个地方放都可以,只要靠近顶部即可。 […]


html到顶部有很多种:


最简单的就锚链接,页面顶部放置:

<a name="top" id="top"></a>


放置位置在

标签之后随便找个地方放都可以,只要靠近顶部即可。


页面底部放置:

<a href="#top" target="_self">返回顶部</a>


(说实话上面的这个到顶部效果太难看了)

  • 今天要说的是滑到顶部,用到的是jquery scrolltop()方法scrollTop() 方法设置或返回被选元素的垂直滚动条位置js代码:
(window).scroll(function(){
    //console.log($(window).scrollTop());
    if ($(document).scrollTop() > 100) {
        $('.to-top').fadeIn('slow');
    }else{
        $('.to-top').fadeOut('slow');
    }
})
$('.to-top').click(function(){
    $('html,body').animate({scrollTop:0}, 500);
});


css代码:

.to-top {
    width: 60px;
    height: 60px;
    background: #333;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    position: fixed;
    bottom: 50px;
    right: 10px;
    display: none;
    box-shadow: 0px 0px 6px 2px #ccc;
    border-radius: 5px;
    color: #fff;
}


html:

<div style="padding: 0 50px;">
<p>22222222222222222</p>
<p>54545545</p>
<p>54545545</p>
<p>54545545</p>
<p>54545545</p>
<p>54545545</p>
<!-- 很多  -->
</div>
<div class="to-top">到顶部</div>


完。

Tags:

转载 云中不知处博客欢迎分享,转载请说明文章出处“ 来源云中不知处博客 http://www.saymiss.com/archives/127 “。
很赞哦!( 0)

上一篇:没有了,已经是最后文章

下一篇:没有了,已经是最新文章

( 0 )个小伙伴在吐槽

访客评论


站点统计

  • 更新时间:2023-04-17 05:40
  • 文章总数:34
  • 评论总数:39
  • 标签总数:25
  • 运行时间: 1785
我的微信
  • 网站赞助:阿里云、腾讯云、百度云、奇虎360、网易云音乐、音悦台、京东商城,哦以上这些都没有。
  • 网站制作:页面设计:Fanda;前端开发:Fanda;后台功能:Fanda;主题开发:Fanda;技术支持:Fanda。我就是天才...
免责声明
  • 1、本站个人博客模板,均为Fanda本人设计,可供个人学习和使用,未经许可不得用于任何商业目的。
  • 2、本站部分文章来自网络,请您放心,所有转载文章内容皆保留来源链接,如本站有著作权属于你的文章内容,而本站并未放上链接或有其他原因侵权,请E-mail: fzh2812@163.com,我会在48小时内删除相关内容,敬请谅解!
碎言碎语
  • 好好珍惜对你好的人,弄丢了上百度也找不回来

    2021-10-25
  • 同在一座城市,为何好久不见!

    2020-11-22
  • 三生有幸遇见你,纵使悲凉也是情

    2020-05-07
  • 忍一时风平浪静,退一步越想越气

    2020-03-21
  • 最近996

    2019-11-09
  • 最近有点忙,996啊

    2019-07-29
  • 端午3天我就没下过楼,出过门

    2019-06-09

©2019 云中不知处 Powered by WordPress 文章归档 免责声明 网站地图 百度统计