关于scrollTop添加动态效果的问题

最新推荐文章于 2026-05-13 11:12:09 发布

原创最新推荐文章于 2026-05-13 11:12:09 发布 · 4.8k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

问题提出，未解决！

当前文章被收录于：

问题提出，未解决！

3 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文探讨了scrollTop作为JS属性而非CSS属性的原因，解释了为何无法直接使用transition或animate添加动画效果。并通过实例展示了如何利用jQuery的animate方法实现平滑滚动到顶部的效果。

问题：scrollTop是js属性, 不是css属性, 所以无法使用transition或者animate去加动画。

奇怪了：$('#toTop').click(function(){$('html,body').animate({scrollTop: '0px'}, 500);});为什么能正常运行，能按要求的实现效果？

这个是我亲测的，在IE8以上的浏览器都是没有问题的!

谁可以解答一下...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

疯狂大嘴

关注关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

2023年全国青少年信息素养大赛C++编程初中组决赛真题+答案解析

伶俐角少儿编程

07-11

741

2023年全国青少年信息素养大赛C++编程初中组决赛真题+答案解析

1 条评论您还未登录，请先登录后发表或查看评论

Python 爬虫进阶技巧：定时爬虫任务实现无人值守采集

最新发布

2503_91057718的博客

05-13

1090

常规爬虫多依赖手动触发脚本运行，单次采集完成后需人工二次启动，无法满足日常周期性数据监控、行情抓取、资讯同步、业务台账定时归档等常态化采集需求。搭建可自主调度、自动启停、周期循环的定时爬虫任务，脱离人工干预实现无人值守全自动采集，是爬虫从临时脚本走向工程化落地的关键一步。schedule 轻量定时库官方文档APScheduler 高级定时框架官方文档Python time 内置模块官方文档Linux crontab 定时任务官方手册。

使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画

博客

03-07

6571

当容器有滚动条时,有时需要点击或将页面滚动到指定元素位置比如父元素设置了 ,当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离. 如何设置滚动 scrollTop属性就是指 “元素中的内容” 超出 “元素上边界” 的那部分的高度。直接给父元素的scrollTop赋值: 这种方法比较直接, 但是因为是直接设置的dom元素的js属性而不是css属性, 所以想通过这种方法设置过渡动画是没有效果的(transition: all 1s linear; 无效)补充: 有

Spring Framework 7.002.Spring IoC 容器与 Bean 简介(Introduction to the Spring IoC Container and Beans)

无

07-04

167

摘要：Spring框架的核心技术包括IoC容器和AOP技术。IoC容器通过依赖注入实现控制反转，提供Bean管理和配置功能。ApplicationContext作为BeanFactory的扩展，增加了企业级特性。文档详细介绍了容器配置、Bean定义、依赖注入、作用域等核心概念，以及基于注解的配置方式。AOP框架支持80%的AOP需求，并可集成AspectJ。此外还涵盖环境抽象、容器扩展点等高级特性，为Java企业应用开发提供全面支持。(150字)

CSS实践详解总结

小小默：进无止境

05-13

1157

【1】CSS选择器 ① 类选择器 1.后代选择选择父类下面的所有后代。 .wrapper-item .layui-form-label{ width: 25%; } <div class="wrapper-item"> <label for="name" class="layui-form-label"> <span class="we-red">*</span>姓名 </label> </

获取滚动条距离控制页面样式

m0_62852343的博客

05-18

213

<template> <h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3> </template> <script> export default { data() { return { translatechange: 'translateX(0%)' } }, methods: {...

如何制作scrollTop变化时的动画

hzxOnlineOk的博客

01-14

6397

首先说明：由于scrollTop属于js属性，因此无法通过css的transition和animation制作scrollTop变化时的过渡动画（本人亲自尝试过，确实如其他博友所说的无效）因此，需要(自己实现也可以)在项目中引入一些工具类帮助实现功能，我选择了jquery，用法如下： let Slog = document.querySelector(".Slog"); $("ht...

js移动到指定位置animate和scrollTop结合使用

diebaiying3731的博客

09-28

1103

js移动到指定位置animate和scrollTop结合使用实例： onclick="$('html,body').animate({scrollTop:$('.J_user_evaluate').offset().top-110},500)" onclick="$('html,body').animate({scrollTop:$('.J_user_evaluat...

scrolltop 原生js_js原生之scrollTop、offsetHeight和offsetTop等属性用法详解

weixin_34432821的博客

01-17

380

scrollTop、offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。先来看一张比较经典的示意图:下面结合各上图介绍一下各个属性的作用:一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父...

scrollTop以及页面回到顶部

freedms的博客

10-24

3085

1.实现有许多种方法，原理是监听页面高度实现滚动。1.实现有许多种方法，原理是监听页面高度实现滚动。

JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）

热门推荐

欢迎来到我的技术博客——一个用代码编织思想的数字花园 🌱

02-28

2万+

这里是javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; window.innerHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高..

js原生之scrollTop、offsetHeight和offsetTop等属性用法详解

learn8more的博客

08-17

822

scrollTop、offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。先来看一张比较经典的示意图: 下面结合各上图介绍一下各个属性的作用: 一.offsetTop属性: 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是p

jquery监听滚动事件获取scrollTop

09-16

639

css： .anchor_reached{ color:#0073eb; } jquery： $(window).scroll(function(event){　　$(".anchor_directory").siblings().each(function(){　　　　varthis_top=$(this).attr("data-top");　...

scrollTop,scrollHeight例子

hljqfl的专栏

01-03

821

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn

scrollTop 用法讲解

10-07

1万+

scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note：当滚动条位置位于最顶部时，位置是0；当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置。当用于设置位置时：该方法设置所有匹配元素的滚动条的垂直位置。 scrollTop() 语法返回滚动条位置

jquery的scrollTop方法

weixin_30702887的博客

08-26

185

scrollTop方法设置或返回备选元素的垂直滚动条位置。提示：当滚动条位于最顶部时，位置是0 当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置当用于设置位置时：该方法设置所有匹配元素的滚动条的垂直位置语法：返回垂直滚动条位置：$(selector).scrollTop(); 设置垂直滚动条位置：$(selector).scrollTop(posi...

scrollTop 用法说明

weixin_30572613的博客

12-21

172

scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度, 下面的演示中，外层元素的高度值是200px,内层元素的高度值是300px。很明显，“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。演示：（拖动滚动条，可以看到scrollTop值的变化）这些...

scrollTop、offsetHeight和offsetTop等属性用法详解

study_no的博客

07-18

1351

scrollTop、offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用，尤其是在运动框架中，但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题，导致掌握起来比较有难度，下面就介绍一下相关属性的用法。先来看一张比较经典的示意图: 下面结合各上图介绍一下各个属性的作用:一.offsetTop属性: 此属性可以获取元素的上外缘...

关于js中的scrollTop

weixin_33785972的博客

07-28

144

2019独角兽企业重金招聘Python工程师标准>>> ...

Jquery scrollTop操作滚动条

hutao1101175783的专栏

08-11

280

scrollTop([val])概述获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。参数valString, NumberV1.2.6设定垂直滚动条值示例无参数描述:获取第一段相对滚动条顶部的偏移HTML 代码:<p>Hello</p><p>2ndParagraph</p>jQuery 代码:varp=$("p:fir...

scrollTop 头部和底部的距离

weixin_43467561的博客

06-17

408

scrollTop 头部和底部的距离

23-jQuery的scrollTop方法——获取/设置滚动的偏移位

小伟

04-11

917

scrollTop([val]) 获取/设置滚动的偏移位 scrollLeft([val]) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>23-jQuery的scrollTop方法</title> &lt...

理解Jquery里 scrollTop()事件

Shen_yuanjia的博客

07-25

501

这是工作遇到scrollTop() 方法。为了强化自己，把它记录在博客中。下面就开始scrollTop 用法讲解： scrollTop() 定义和用法 scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。 Note：当滚动条位置位于最顶部时，位置是0；当用于返回位置时：该方法返回第一个匹配元素的滚动条的垂直位置。当用于设置位置时：

双色球历史开奖结果(2003001期~2026010期）

双色球历史开奖结果(2003001期~2026010期），红球已按从小到大排好顺序，用于预测结果很便利！

基于Matlab的植物病虫害图像识别系统源码实现（毕业设计、课程设计及项目开发应用）

本资源提供了一套利用MATLAB环境实现的植物病害与虫害视觉检测系统，包含完整的程序代码。该方案适用于高等院校的毕业设计、专业课程实践以及相关技术项目的研发工作。所有程序模块均通过了系统的验证测试，具备良好的可靠性与可扩展性，用户可将其作为基础框架进行进一步的定制与功能拓展。资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！