jquery滚动条返回顶部 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jQuery点击返回顶部

顶部" style="width: 50px;".../paparela/static/image/dingbu.png" alt="置顶图标"> $(document).ready(function(){ //为当前窗口添加滚动条滚动事件...function(){ //创建一个变量存储当前窗口下移的高度 var scroTop = $(window).scrollTop(); //判断当前窗口滚动高度 //如果大于100，则显示顶部元素...，否则隐藏顶部元素 if(scroTop>100){ $('.backtop').fadeIn(500); }else{ $('.backtop').fadeOut(500)...; } }) }) //为返回顶部元素添加点击事件 $('.backtop').click(function(){ //将当前窗口的内容区滚动高度改为0，即顶部

8.3K4 0

Jquery实现一键返回顶部

一、需求分析当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。...现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家： ?...pointer; display: none; } #Back-to-the-top .layui-icon { font-size: 50px; color: #333; } Jquery...代码： // 返回顶部 window.onscroll = function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset

2.4K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

返回顶部案例

带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...当我们点击了返回顶部模块，就让窗口滚动的页面的最上方 goBack.addEventListener('click', function() { // 里面的x和

2.3K3 0

Vue实现顶部滚动条

window.onscroll = function () { let scrollTop = document.documentElement.scrollTop; //获取滚动条

5811 0

移动端返回顶部

当页面滚动某个地方，就显示返回顶部图标，否则隐藏点击可以返回顶部实现代码跟pc端一致案例分析：滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset...）大于某个数值点击，window.scroll(0,0) 返回顶部 //返回顶部模块制作 var goBack = document.querySelector( '.goBack' );

2K4 0

返回顶部插件 Toptop

插件简介 Typecho的主题很多都没有带有自动返回顶部功能，可能也是这个原因，有人按耐不住开发了这个返回顶部功能的插件TopTop，该插件自带两个主题样式。

2K4 0

jQuery仿极客公园火箭发射“返回顶部”效果（优化篇）

承接上一篇《jQuery仿极客公园火箭发射“返回顶部”效果（初始篇）》，本文将对前一篇的代码进行优化。...DOCTYPE HTML> jquery.com/jquery-1.7.1.min.js"> var scrollTT = { tTSpeed : 800, // 滚动到顶部的时间...火箭起飞的时间 restartTime : 1200, // 重置火箭位置的时间 flySpeed : 50, // 火箭向上飞行的速度 obj : $("#backtotop"), // 回到顶部的

1.8K6 0

类极客公园火箭发射“返回顶部”jQuery效果（WordPress代码教程）

之前在三篇系列文章《jQuery仿极客公园火箭发射“返回顶部”效果》中已经给出了“仿”的教程，今天分享也是一个火箭发射“返回顶部”的效果，不过这个火箭更加肥胖了点。...一加载jQuery库文件，如果主题已经加载了，则可以忽略这一步；二在主题的footer.php 的适当位置添加以下代码： <div style="display: none;" id="rocket-to-top

1.7K6 0

jQuery仿极客公园火箭发射“返回顶部”效果（WordPress代码篇）

前面分享了两篇有关《 jQuery 仿极客公园火箭发射“返回顶部”效果》的文章，如果你是Word-Press 老手，肯定知道如何移植到WordPress主题中；本文针对的是新手，如果你想在你的WordPress...建议先看一下下面的文章——如果你还没有看过的话：《 jQuery仿极客公园火箭发射“返回顶部”效果（初始篇）》《 jQuery仿极客公园火箭发射“返回顶部”效果（优化篇）》教程如下（代码来源于...一加载jQuery库文件，如果主题已经加载了，则可以忽略这一步；二在主题的footer.php 的适当位置添加以下代码：放在footer.php中： var scrollTT = { tTSpeed : 800, // 滚动到顶部的时间...火箭起飞的时间 restartTime : 1200, // 重置火箭位置的时间 flySpeed : 50, // 火箭向上飞行的速度 obj : $("#backtotop"), // 回到顶部的

2.1K7 0

jquery横向滚动条

org/1999/xhtml"> jQuery...模拟横向滚动条 jquery-1.6.2...lk_scrollBox {width:600px; height:320px; border:1px solid black; position:relative; overflow:hidden; } /* 滚动条...div id="lk_end"> //20131114 link by jQuery

10.8K7 0

js实现返回页面顶部

无动态效果 1、原生JS window.scrollTo(0,0); 2、jQuery $(window).scrollTop(0); 有动态效果 1、原生JS function smoothscroll...window.requestAnimationFrame(smoothscroll); window.scrollTo (0,currentScroll - (currentScroll/5)); } 2、jQuery...return false; } $('body').animate({scrollTop:0},200); return false; 注意：将代码放入click事件的函数，或者执行函数，就能执行，返回顶部

9K1 0

仿淘宝返回顶部案例

.案例：返回顶部带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...当我们点击返回顶部模块，就让窗口滚动到页面的最上方 goBack.addEventListener("click", function () { // 里面的x 和 y 不跟单位的

1.8K2 0

前端中返回顶部功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...

1.9K2 0

移动端返回顶部案例

1.案例：返回顶部当页面滚动某个地方，就显示，否则隐藏点击可以返回顶部 2.案例分析滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset...）大于某个数值点击，window.scroll(0,0) 返回顶部 // 返回顶部模块制作 var goBack = document.querySelector(".goBack")

2.1K2 0

jQuery实现回顶部效果

timer = setInterval(function(){ distance -= itemDistance //到达顶部

3.9K2 0

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

说在前面：在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示返回顶部按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。...语法： $(selector).scroll() 应用：我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。...HTML部分：返回顶部 CSS部分： body{ height: 2000px; } .goTop{ position...); } else { $('.goTop').fadeOut(); } }) /*点击返回顶部

7.9K3 0

CSS3形式返回顶部

返回顶部按钮很多站都有，实现方法也很简单，这次分享一个效果不太一样的：图标采用CSS3形式，页面返回时会有弹簧效果。效果来源于给力壁纸的作者博客。哎，嘴笨，大家看看本页面的效果就明白啦。....scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery...a:{top:a,left:a}}})(jQuery); $(function($){ var backToTopItem = $("#back-to-top"); backToTopItem.click

1.4K2 0

返回顶部和回到底部

经常会有返回顶部、回到底部的需求，推荐一种比较简单的写法 JQ中有 scrollTop() 方法可以帮助我们快速实现该需求示例：测试返回 jquery/1.9.0.../jquery.js" type="text/javascript"> function test(){ $("....div1").scrollTop(0);//此为滚动条的位置--返回顶部 $(".div1").scrollTop($(document).height());//此为滚动条的位置---返回底部

9421 0

网站经典功能之返回顶部

但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。站长源码网 2....返回顶部代码示例 ---- div.box { height: 1000px; background-color: aqua; margin-bottom: 20px; } div#gotop

1.2K1 0

js点击按钮返回页面顶部

2016-08-22 03:08:28 在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...，点击该按钮返回顶部，并且有一定的效果。...该方法就是利用锚点的方式来返回顶部。即给最顶部的div设置一个id，然后a标签的链接地址写成该id，当点击时就会返回顶部，但是缺点为过于突兀，因为是立即返回顶部。...来看一下代码吧：返回顶部上面代码当滚动条滚动到一定位置后出现该a标签，且该a标签的position...文件，点击之后滚动条会有一个滚动过程，不是一下子回到顶部，个人感觉不错。

32.4K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭