资讯专栏INFORMATION COLUMN

JavaScript温故:制作一个backtotop按钮

sunnyxd / 1333人阅读

摘要:按钮可以在内容滚动时,给用户一个返回顶部的方便。制作一个按钮的关键是告诉浏览器此元素相对于浏览器固定,而不随着内容的滚动而滚动。代码达到此效果的方式是使用的特性而属性组合告诉浏览器,固定此元素在相对于右下角的,位置处。

backtotop按钮可以在内容滚动时,给用户一个返回顶部的方便。制作一个backtotop按钮的关键是告诉浏览器此元素相对于浏览器固定,而不随着内容的滚动而滚动。代码:

    
Try Scroll Down

达到此效果的方式是使用css的特性

    position:fixed;

而属性组合:

    bottom: 40px;
    right: 40px;

告诉浏览器,固定此元素在相对于右下角的40px,40px位置处。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81271.html

相关文章

  • JavaScript 温故制作一个sidebar

    摘要:是一种常用类型的导航组件,它可从页面旁侧弹出,覆盖在正常内容上。其内有链接到和。 sidebar是一种常用类型的导航组件,它可从页面旁侧弹出,覆盖在正常内容上。 假设你的正常内容为: Placeholder Placeholder Placeholder 现在我们可以在内容内加入sidebar。其内有链接到Ho...

    waruqi 评论0 收藏0
  • 完美实现一个“回到顶部”

    摘要:在浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑回到顶部,只需在这两个标签上都加上准确的说,写在容器元素上,可以让容器非鼠标手势触发的滚动变得平滑,而不局限于,标签。 前言 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要...

    layman 评论0 收藏0
  • 完美实现一个“回到顶部”

    摘要:在浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑回到顶部,只需在这两个标签上都加上准确的说,写在容器元素上,可以让容器非鼠标手势触发的滚动变得平滑,而不局限于,标签。 前言 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要...

    littlelightss 评论0 收藏0
  • js温故而知新11(AJAX)——学习廖雪峰的js教程

    摘要:在回调函数中,通常我们只需通过判断请求是否完成,如果已完成,再根据判断是否是一个成功的响应。因此我们需要首先在页面中准备好回调函数当前价格最后用函数触发表示本域,也就是浏览器当前页面的域。 Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。 如果仔细观察一个Form的提交,你就会发现,一旦用户点击Submit按钮,表单开始提...

    kun_jian 评论0 收藏0
  • 温故js系列(10)-事件event

    摘要:当用户选择文本框或中的一个或多个字符触发。当文本框或内容改变且失去焦点后触发。事件对象事件对象就是对象,通过处理函数传递。比如右击文本框输入区域,会弹出系统菜单点击超链接会跳转到指定页面点击提交按钮会提交数据。 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:Event JavaScript-事件even...

    Freelander 评论0 收藏0

发表评论

0条评论

sunnyxd

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<