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

最新推荐文章于 2023-06-29 15:03:33 发布

疯狂大嘴

最新推荐文章于 2023-06-29 15:03:33 发布

阅读量4.3k

点赞数

分类专栏：问题提出，未解决！

本文链接：https://blog.csdn.net/qq_38744335/article/details/78612909

版权

问题提出，未解决！专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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

谁可以解答一下...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

疯狂大嘴

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

div 的scrollTop增长问题

gwpJava的专栏

07-25

1246

<asp:datalist id="dlgsl" Runat="server" Width="100%" ItemStyle-CssClass="lheight"> 我们可以通过Inewgsl:demo的scrollTop++来实现滚动，可是有这样一个问题，如果我们不把scrollTop复位，写成这样会有什么结果呢 var d=doc

jQuery动画效果animate和scrollTop结合使用实例

12-03

`animate`是jQuery提供的一种高级功能，允许开发者平滑地改变一个或多个CSS属性值，从而创建出动态过渡效果。当这些属性值是数字形式时，如`margin`、`width`或`height`，`animate`可以将它们从一个值平滑地过渡到另...

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

【vue例子】vue实现侧边栏点击top，动画滚动到顶端

前端代码小白的日常博客

12-06

1103

实现滚动页面的时候，显示侧边固定定位的top，点击top实现动画向上滚动到顶部

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

灰色头像@的博客

03-07

5449

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

jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决

干勾鱼的CSDN博客

03-10

2万+

jQuery中animate()的方法可以去w3school查看，这里主要说一下：$("body").animate({"scrollTop":top})不被Firefox支持问题的解决。其实是使用body的：$("body").animate({"scrollTop":top})只被chrome支持，而不被Firefox支持。而使用html的：$("html").animate({"scrollT

实现对一个元素的滚动条进行平滑滚动至顶部的动画效果

热门推荐

栈木地

02-19

7万+

效果类似于直播网站的评论，会一条接着一条向上 go out ； js部分很简单：通过控制scrollTop的值来实现自动滚动效果；很重要两点： 1、scrollTop的值不可以加单位，谨记！ 2、网页缩放比例会影响效果实现（下面具体...

28 - JavaScript 特效：scroll家族和缓动动画

JayYuen的博客

11-19

6559

缓动动画三个函数缓慢动画里，我们要用到三个函数，这里先列出来： Math.ceil() 向上取整 Math.floor() 向下取整 Math.round(); 四舍五入缓动动画的原理缓动动画的原理就是：在移动的过程中，步长越来越小。设置步长为**：目标位置和盒子当前位置的十分之一**。用公式表达，即：盒子位置 = 盒子本身位置 + ...

scrollTop()的问题

无码帝的专栏

05-09

591

能看的见到图片：一开始看不到的图片： var hasShow = false; $(window).bind("scroll",function(){ if(hasShow==true){ $(windo

如何制作scrollTop变化时的动画

hzxOnlineOk的博客

01-14

6235

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

CSS实践详解总结

小小默：进无止境

05-13

862

【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

140

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

js实现返回顶部功能的解决方案

FE攻城狮

08-19

5万+

很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。首先需要在顶部添加如下html元素：返回顶部其中a标签指向锚点top，可以在顶部防止一个的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。要想让返回顶部的图片显示在右侧，还需要一些css样式，如下： /*returnTop*/ p#back-to-top{ po

回到顶部总结

weixin_30877755的博客

10-08

164

网站中的回到顶部功能有益于增强用户体验，当一个页面很长很长时，回到顶部是必不可少的。回到顶部按钮，可以使用图片，背景图，矢量字体图标，也可以使用代码 css 生成。这里使用 css 生成的方法。 <a href="" title="回到顶部" id="toTop"> <span id="arrow"></span> </a> ...

JavaScript实现滚动字体动态效果的技术解析

- JavaScript通过DOM（文档对象模型）操作页面元素，实现动态效果。 2. 动态性： - JavaScript可以响应用户的交互，如鼠标点击、键盘输入、页面滚动等事件。 - 动态性意味着JavaScript代码可以在运行时根据不同...