关于使用jquery制作滚动效果

最新推荐文章于 2023-07-03 10:57:21 发布

SunAOJLXY

最新推荐文章于 2023-07-03 10:57:21 发布

阅读量411

点赞数

本文链接：https://blog.csdn.net/sunaojlxy/article/details/24698813

版权

最近在研究网页里面的那些滚动式浏览方式，就是单机指定按钮网页自动滚动到那个位置（DIV）

自己研究了一下，开始准备使用js写，使用循环的方式100毫秒向下推进10px，但是这样写着实感觉有些麻烦，而且方法不灵活的感觉。

代码大概的思路就是先计算指定位置的ID值和Top的间距：$(指定ID).offset().top

然后通过 $("body").scrollTop(“位置”) 的方式不断的刷新位置。

这些代码都是jquery的写法，js的没有保存

后来我发现，其实一句：$("html,body").animate({ scrollTop: "0px" }, 200);就可以了··

当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SunAOJLXY

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

使用jQuery实现滑动效果

LogicGuruX的博客

09-29

434

在jQuery中，可以使用各种方法来实现滑动效果，包括滑动显示、滑动隐藏、滑动切换等。方法可以实现滑动显示元素的效果。该方法将被选元素的高度从0逐渐增加到其原始高度，实现平滑的滑动效果。方法可以实现滑动隐藏元素的效果。该方法将被选元素的高度从当前高度逐渐减小到0，实现平滑的滑动效果。需要注意的是，使用这些滑动方法之前，必须先引入jQuery库。这些方法的使用方式与上述方法类似，只需将方法名称替换为相应的方法即可。在引入jQuery之后，就可以使用上述的滑动方法来实现丰富的滑动效果了。

jQuery数字滚动效果

06-04

1. **选择元素**：使用jQuery的选择器选取需要应用滚动效果的数字元素，例如`$("#digit")`。 2. **初始化数值**：获取当前数字元素的初始值，并存储为变量，以便后续操作。 3. **目标数值**：确定数字要滚动到的...

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

JQuery实现自定义滚动条

觉醒法师的专栏

05-05

3797

在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的，而且不同浏览器存在兼容问题，因此通过JS来实现滚动条在。的环境下也是有必要的。

使用jquery实现无缝向上滚动效果

热门推荐

pan_junbiao的博客

04-03

1万+

1、导航效果 2、新闻滚动（跑马灯） 3、广告效果 4、新款上市模块横向滚动 1、导航效果图1.1 导航效果 1.1 导航样式 /*导航样式开始*/ #navigation { width:784px; padding:8px; margin:8px auto; background:#3B5998;height:18p

【jQuery】实现列表滚动

Ai-Fairy的博客

09-05

1555

利用jQuery实现列表滚动效果。

基于jQuery实现数字滚动效果

10-20

3. 使用jQuery的`animate()`方法：这个方法是实现动画的关键。`animate()`方法允许开发者定义一个或多个CSS属性，jQuery将会以动画的形式将这些属性从一个值变化到另一个值。在实现数字滚动时，可能需要对数字的字体...

jQuery文字滚动切换动画特效

06-24

总结来说，"jQuery文字滚动切换动画特效"是一个利用jQuery库创建的动态文字展示方法，适用于网页信息的动态展示，通过JavaScript编程实现文字的平滑过渡和动画效果，提升了网页的视觉吸引力和用户体验。开发者可以...

jQuery制作仿Mac Lion OS滚动条效果

10-24

2. jQuery插件使用：文章介绍了如何使用jQuery插件“nanoScrollerJS”来实现Mac OS滚动条效果。通过插件，开发者可以不需要编写大量代码就能实现复杂的界面效果。 3. 插件工作原理：该插件基于最小HTML结构，利用...

jQuery鼠标滚动缩放效果特效代码

03-20

要使用jQuery，必须在HTML文档中引入jQuery库，通常通过CDN链接或者本地文件引用。例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接着，我们要创建一个HTML结构，包含...

用jquery实现平滑的页面滚动效果

qq_43951574的博客

05-08

1175

用jquery实现平滑的页面滚动效果通过几句jquery代码实现页面平滑滚动到某一锚点的效果。实现代码来源于 https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquery代码如下： $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.rep

一种通用的jquery动画滚屏方案

一名高级工程师的博客

07-25

739

实现效果在网站页面上，点击某个超链接，页面跳转到某个位置，跳转过程有一个动画滚动效果，这是一种比较酷的体验。这种效果是如何实现的呢，本文通过实际代码来详解实现方法。实现代码网页代码<!doctype html><html><head> <meta charset="utf-8...

jQuery无缝向上滚动效果

yx_cos的博客

01-22

6331

该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果，废话不多说，直接上代码（1）向上滚动 HTML： 21:01:03 137****6943 ¥6.06 21:01:03 137****6943 ¥6.06 21:01:03 13

jQuery循环滚动效果

ahook的专栏

10-08

349

滚动到底部后返回顶部 var rowBack = ()=>{ mTop = (mTop <= -33*7 ? -33 : mTop - 132) var css = {'margin-top': warnHight}; $('#list').animate(css ,800); } setInterval(()=>{ if($('#list').hasClass('table')){ rowBack() } },2000).

jQuery实现滚动公告栏特效

捕鱼麦大叔的博客

05-22

7962

效果：HTML:<span class="new-notice">最新公告：</span> <div class="notice"> <ul> <li> <a href="#"><span>2018-5-31</span&

jQuery实现文字上下循环滚动效果

很馋的虫子

11-06

6673

<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上下循环滚动效果</title> <script typ

jquery全屏滚动效果

啊哈前端的专栏

07-26

2224

jquery全屏滚动效果 * {margin: 0;padding: 0} html,body { width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.5); } section { height

Jquery 滚动效果实现

流年轻逝

06-07

776

今天分享一个很实用的Jquery的滚动效果的代码，能够使用动画的和非动画，见代码： function scrollToLocation() { var messageList = $('#messageList'),//先获取到需要滚动的DIV scrollToContainer = messageList.find('li:last');//滚动到中类名为son-pan