开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当点击浏览器顶部时,使用jquery滚动固定元素

当点击浏览器顶部时，使用jQuery滚动固定元素，可以使用jQuery的.animate()方法和scrollTop属性来实现。下面是一个简单的示例代码：

// 当点击顶部时
$("#top").click(function() {
  // 使用animate方法平滑滚动到顶部
  $("html, body").animate({ scrollTop: 0 }, "slow");
});

在这个示例中，我们首先使用$("#top")选择器选中顶部元素，然后使用.click()方法为其添加一个点击事件处理程序。在事件处理程序中，我们使用$("html, body")选择器选中整个文档，并使用.animate()方法来平滑滚动到顶部。scrollTop: 0表示将滚动条的位置设置为0，即顶部。"slow"表示动画的持续时间为慢速。

需要注意的是，这个示例中的代码需要在jQuery库被加载之后才能运行。如果你还没有加载jQuery库，可以在HTML文档的<head>标签中添加以下代码来加载jQuery：

这样就可以使用jQuery的各种方法和属性了。

相关搜索:固定html时滚动到元素顶部，正文当菜单栏固定在屏幕顶部时，垂直滚动跳转当元素到达屏幕顶部时，使用ScrollView停靠该元素当固定元素位于另一个绝对元素的顶部时，它将丢失当点击表格行时，如何滚动到页面上有固定标题的元素？当光标位于屏幕的顶部或底部边缘时,如何使用JQuery/Javascript向下滚动页面？保持一个元素固定，并允许其他元素在移动浏览器地址栏向上滚动时滚动当使用addEventListener点击时，获取数组中元素的值？当删除多个元素时，如何使用Jquery重置计数？当使用jquery点击按钮时，需要触发空格键事件单击div不会像使用jQuery时那样滚动到元素当某个元素使用jQuery触及页面上的其他元素时隐藏该元素如何在使用jQuery load添加内容后强制固定位置的div滚动到顶部当浏览器中有多个使用python selenium的滚动条时，如何向下滚动当一个特定的div点击我的固定标题时，或者当它从顶部开始是100px的时候，我如何让它滚动离开？当页面从底部向前向后随机单击时，jquery数据表会滚动到顶部引导模式对话框是通过JQuery打开时自动将浏览器滚动到顶部使用箭头键滚动时，将菜单顶部设置在ul元素的中间当使用js或jquery向下/向上滚动时，我想隐藏/显示导航栏当我向下滚动时，如何将导航栏固定到顶部？我也想有一个导航栏上方的图片，当滚动所有的方式

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

页面中元素的吸顶

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >>

03

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

演示效果自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">

03

纯CSS实现吸附效果

「吸附效果」就是网页滚到到某个位置，元素固定在该位置，后续不随网页滚动而滚动。吸附效果很常见，譬如吸顶效果和吸底效果，经常用在跟随导航、移动广告和悬浮提示等场景中。

02

DOM 和 BOM 中的各种宽高属性

window.innerHeight/window.innerWidth: 返回表示窗口的内部高度/宽度的数字。不包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分

01

【前端词典】4 种滚动吸顶实现方式的比较

我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。

06

js点击按钮返回页面顶部

在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮，点击该按钮返回顶部，并且有一定的效果。

01

【前端词典】4 （+1）种滚动吸顶实现方式的比较

我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。

03

waypoint_使用jQuery Waypoint创建粘性导航标题

在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。

03

H5C3第四节

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

03

Jquery实现文章页侧边栏随动滑动

做网站时很可能会用到文章页 sidebar 整个或某一个区块随着整个页面的滑动而固定在某个位置，以方便访客快捷操作。那，这里就简单介绍一下使用 jquery 实现侧边栏随动。

03

jQuery实现图片懒加载

一、懒加载 1.什么是懒加载目前，网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。 2.懒加载的原理页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，

02

js、jQuery 获取文档、窗口、元素的各种值

浏览器当前窗口文档body的宽度： document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度： document.body.clientHeight;(仅仅是body的height)

03

膜拜！用最少的代码却实现了最牛逼的滚动动画！

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。

00

膜拜！用最少的代码却实现了最牛逼的滚动动画！

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。

02

移动端H5坑位指南

使用能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

01

第77天：jQuery事件绑定触发

返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候

03

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

04

第134天：移动web开发的一些总结（二）

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orientation：检查设备处于横向（landscape）还是竖屏（portrait）

01

jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部

在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示返回顶部按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。

03

全代码打造简洁美观回到顶部按钮

这次，潜行者m给大家带来一个比较实用的 jQuery 技巧，为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。这个按钮的效果就是，当页面滑动一段距离之后，就会浮现出来这个按钮，点击这个按钮之后，就自动滚动到顶部。

03

开发 | 餐饮小程序必备！教你轻松做出像「饿了么」一样的点餐界面

许多购物、外卖小程序，都会做「分栏」设计，即在左侧展示商品分类、右侧展示分类下的具体商品。

04

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。

02

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

01

详细设计一个文章页目录插件

在说这个插件之前，可以先去 https://bubuzou.com/ 这个网站体验下这个插件的效果，好有个大概的印象。

02

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane 和 mCustomScrollbar。

03

CSS固定定位与粘性定位4大企业级案例

前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。

03

Bootstrap相关优质项目学习清单

1：编码规范 by @mdo编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范 http://codeguide.bootcss.com/ 2：快速、可靠、安全的依赖管理工具。Yarn 缓存了

02

HTML中怎么做悬浮框？

悬浮框是什么？大家不一定清楚，但是说网站上怎么都关不完的小广告，估计人人都被它恶心过，不管你怎么滚动网页，这些小广告始终会出现在你的屏幕上。今天我们就来聊聊这些小广告背后的原理——悬浮框。

04

js获取屏幕大小，当前网页和浏览器窗口

如果您使用的是jQuery，则可以使用jQuery方法获取窗口或document的大小：

02

如何使用CSS中的固定定位属性？

CSS中的固定定位属性（position: fixed）是一种常用的布局技术，可以将元素固定在浏览器窗口的特定位置，不随页面滚动而变动。这个属性在开发各种网页和应用程序时非常有用。本文将介绍固定定位属性的使用方法，并提供具体的代码示例。

01

一些好用的jquery技巧

1、返回顶部按钮通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画： // Back to top $('.top').click(function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); }); Back to top 改

06

JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。

00

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。

01

【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )

实现下图样式 : 中间部分是网页内容 , 左右两侧是固定广告栏 , 不管浏览器如何滚动 , 缩放 , 该左右两侧广告栏不变 ;

03

html中下拉菜单(html做下拉菜单栏)

使用html5或者jQuery如何实现文本框下拉效果，如下图 CSS布局HTML小编今天和大家分享大神详解最好有可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id 然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。在 datalist 标签下放列表项。

04

[OHIF-Viewers]医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.throttle(func, [wait=0], [option

https://www.lodashjs.com/docs/lodash.throttle

02

移动端滚动研究

在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll发现触发的时机区分android和ios两种情况，具体可以看下面表格:

02

VUE框架：vue2转vue3全面细节总结（4）滚动行为

我们可以通过 vue-router 自定义路由切换时页面如何滚动。比如，当跳转到新路由时，页面滚动到某个位置；切换路由时页面回到之前的滚动位置。

05

前端工程师面试题汇总

作者：@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用？严格模式与混杂模式如何区分？它们有何意

08

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ;

02

「译」前端项目中常见的 CSS 问题

快速摘要：近年来，跨浏览器的渲染和交互已经愈加一致。不过，它仍然没有达到完全一致，有很多小问题会让你出错。除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了许多会让开发者出错的小问题。

01

Bootstrap滚动监听不用offset实现向下偏移

Bootstrap滚动监听中文文档：http://v3.bootcss.com/javascript/#scrollspy 我就不在此赘述了。

00

jQuery事件对象

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

03

前端成神之路-定位

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

02

前端面试那些坑

HTML Doctype作用？严格模式与混杂模式如何区分？它们有何意义? HTML5 为什么只需要写？行内元素有哪些？块级元素有哪些？空(void)元素有那些？页面导入样式时，使用link和@

06

控制页面的滚动:自定义下拉到刷新和溢出效果

通过阅读本文,你可以通过css 中overcroll-behavior属性值的设置,处理浏览器溢出滚动,以及禁用移动设备上刷新,下拉滚动时的发光和橡皮圈回弹效果,当然也可以看到css中 Houndini(胡迪宁),也就是css中也可以写变量等知识,如果文有误导的地方,欢迎路过的老师拍砖指正

02

16个超实用的jQuery技巧攻略

本文我们将为jQuery用户分享8个超实用的技巧攻略。jQuery是JavaScript最好的库之一，主要用于制作动画、事件处理，支持Ajax及HTML 脚本客户端。此外，jQuery还拥有各种插件，以帮助开发者在最短时间内快速创建网站/网页。

03

JQuery第三节

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

03

【CSS】使用固定定位实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ;

05

页面返回顶部代码_网页回到顶部代码

1 使用文字添加方法最简单的是：最简单的“返回顶部”代码就是“返回顶部”（不包括引号），(0,0)代表座标，第一位是水平，第二位是垂直，(0,0)就表示网页左上角，文字部分（返回顶部）可以自由替换成自己需要的内容，比如也可以用“TOP”都可以。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭