如何使用JavaScript/jQuery滚动到页面顶部？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

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

7.5K3 0

fullPage.js全屏滚动插件

string)左右滑块的项目导航的位置，可选 top 或 bottom controlArrowColor (string) 左右滑块的箭头的背景颜色 loopBottom (true/false)滚动到最底部后是否滚回顶部...loopTop (true/false)滚动到最顶部后是否滚底部 loopHorizontal (true/false)左右滑块是否循环滑动 autoScrolling (true/false)...”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink...-- javascript" src='..

18.6K2 0

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

是的

没有找到

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。...具体需求如下：点击页面侧边的顶部、中间或底部按钮，页面滚动到顶部、中间或底部对应的范围内。这三个范围的设定如下：顶部：滚动条距离页面顶部 0 ～ 960px（不包含 960）的范围。...当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。... 标签：引入 jQuery 库和自定义的 JavaScript 文件 index.js。...页面加载：浏览器解析 HTML 文件，加载 CSS 文件和 JavaScript 文件。页面显示顶部、中间和底部区域，以及右侧的侧边栏。 2.

1.4K0 0

06-移动端开发教程-fullpage框架

我们经常见到一些全屏的特绚丽页面，手指或者鼠标滑动一下就是一整屏切换，而且还有各种效果。比如：全屏滑动案例下面我们就介绍一下jQuery的fullPage.js的如何使用及常用的配置。...--引入jQuery的插件fullpage.js核心文件--> javascript" src="jquery.fullPage.js"> 2.4...loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式...是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。...afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink

6.4K5 0

06-移动端开发教程-fullpage框架

6.6K9 0

返回顶部的五种实现方法

-- 很多内容 --> 返回顶部【3】使用自定义链接锚点在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点返回顶部【4】使用简单的JavaScript脚本设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置...-- 很多内容 --> javascript:window.scrollTo(0,0)">返回顶部【5】使用简单的jQuery实现 1 jquery.min.js"> 2 javascript"> 3 $(document).ready(function...此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

6K2 0

实现单页浮动导航效果的 jQuery 插件：Smint

Sminti 介绍现在的网页设计中，浮动导航菜单被广泛应用了，通过它，可以可以快速移动到菜单，Smint 就是这样一个简单的 jQuery 插件，可以将导航菜单浮动在页面的顶部，点击菜单快速滚动到达页面的位置...在页脚加载 jQuery 库和 jQuery.smint.js。...javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"...> javascript" src="js/jquery.smint.js"> 5....我们可以使用这个 class 添加一些额外的样式。

4.8K3 0

scrollIntoView()方法导致整个页面产生偏移

问题描述今天在做页面UI改版的时候发现，我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候，让左侧题目滚动到页面可视区域。...，当点击题目编号的时候，除了题目会滚动到可视区域，整个页面也会稍稍往上滚动，导致页面错位。...如下图所示，当我点击第9题的时候，左侧第9题移动到视口中，但是整个页面包括导航栏都往上移动了，且无法在移回来，整个页面是没有滚动条的。 ?...animate 函数使用方法：https://jquery.cuishifeng.cn/animate.html 如果不使用 jQuery 的话，由于scrollTop 是js属性，不是css属性，...下面是一个参考例子：javascript - scrollTop animation without jquery 相关问题类似的问题和解决方法如下链接： scrollintoview-moves-the-whole-page-layout-up

5K4 0

页面滚动，元素跳动；附带jquery.scrollex.js插件

有些动画是页面一加载就要的，还有一些动画是需要页面滚动到那个元素才要展示的。本文以模板之家的 “全屏Story日记本个人主页自适应模板”为例，解析这两种动画实现的方式之一。...当滚动到该元素时，去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件二、使用方法要使用这个...jQuery插件，需要在页面中引入jquery(1.11+)和jquery.scrollex.js文件。...12 javascript" src="js/jquery-1.11.0.min.js">javascript...top 顶部视口边缘在元素之内。 bottom 底部视口边缘在元素之内。 middle 顶部或底部视口边缘在元素的中间。

7K1 1

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

下图是两者官方示例的简单对比：本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改...总之，你知道非常好用就是了，:-) 如何使用 mCustomScrollbar mCustomScrollbar 这个插件的下载包里面包含了所有的插件文件和一些例子。...如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话，更推荐采用下面的这种 fallback 的写法，如果 CDN 的 JavaScript 代码没有加载成功...Demo 同上 callbacks:{ onTotalScrollBack:function(){} }：当滚动到顶部的时候调用这个自定义回调函数 Demo 同上 callbacks:{ onTotalScrollOffset...");：滚动到顶部（垂直滚动条） $(selector).mCustomScrollbar("scrollTo","bottom");：滚动到底部（垂直滚动条） $(selector).mCustomScrollbar

16.4K3 0

js滚动到页面顶部

原生js的scrollTo来实现滚动到页面顶部。...方法一: // 页面滚动到顶部 // 方法一 document.body.scrollTop=document.documentElement.scrollTop=0 // 方法二 document.body.scrollIntoView...() // scrollIntoView 是元素也有的方法, 可以用在页面元素上，例如 document.getElementById('id').scrollIntoView() 方法二: //回到顶部...,底部,指定地方采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用jquery中的animate，实现滚动的一个动作，慢慢的滚动到你想跳转到的位置滚动到顶部： $('.scroll_top...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。

17K0 0

H5C3第四节

360浏览器 fullpage的使用 fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。...参考文档 http://www.dowebok.com/77.html 下载地址 https://github.com/alvarotrigo/fullPage.js 基本使用引入jQuery文件，因为...fullpage是jquery插件引入fullpage的js文件页面结构编写js代码动到顶部后是否连续滚动到底部，默认false loopBottom 滚动到底部后是否连续滚动到顶部，默认false continuousVertical 是否循环滚动，默认为false...nextIndex是滚动到的页面的序号，direction是往上还是往下滚动，值是up或者down.

6.8K3 0

jquery 置顶按钮

这个图片我用了阿里的矢量图库，如果不懂如何使用的朋友，可以访问iconfont阿里巴巴矢量图标库从注册到使用。再写一些p段落，用来形成滚动条，如下： ?...点击置顶按钮，设置返回顶部 ?...这里就涉及到如何设置返回顶部的兼容性写法，如下： $('html,body').animate({"scrollTop":0}); 设置置顶按钮的显示和隐藏下一个问题就是，这个置顶按钮不用一直显示，...只有文档拖动到下方一定的距离才会显示，上方的位置则不用显示。..." src="jquery/jquery-3.3.1.min.js"> javascript"> $(function()

3.8K3 0

高效Web开发的10个jQuery代码片段

高效Web开发的10个jQuery代码片段在过去的几年中，jQuery一直是使用最为广泛的JavaScript脚本库。...navigator.userAgent.match(/msie/i) ){ 　　alert('I am an old fashioned Internet Explorer'); 　　} }); 2、平稳滑动到页面顶部...这是一个最广泛使用的jQuery效果：对一个链接点击下会平稳地将页面移动到顶部。...非常有用的代码片段，它允许一个元素固定在顶部。...、粘贴和剪切的操作使用jQuery可以很容易去根据你的要求去检测复制、粘贴和剪切的操作。

1.3K8 0

如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件

使用 jspdf 库，我们可以轻松地将任何 HTML 页面或表单转换为 PDF：例如： import { jsPDF } from 'jspdf'; const pdfContentEl = document.getElementById...这是我们打开 PDF 时显示的内容：安装 jsPDF 要开始使用 jsPDF 库，我们可以使用以下命令从 NPM 安装它： npm i jspdf 安装后，我们可以将其导入到 JavaScript...在使用 npm install parcel 安装 Parcel 之后，我们使用 npx parcel my-file.html 运行 HTML。...PDF 页面的单位和尺寸。...br /> Submit Save PDF JavaScript

4.4K2 0

Js处理滚动条和日期框

滚动条不是html页面的元素，它是浏览器的元素。想获取浏览器的元素，就不能走常规套路啦，要通过javascript来执行。不是所有的元素都一定要拖动到可见区域才能操作的。...例如百度搜索中，最后选择这个页面跳转： ? 例如底部的页面跳转：有的系统，虽然进来是这个地方，想操作页面底部的元素，可以操作，也不需要拖动滚动条，它会自动将它拖动到可见区域，然后去操作它。...例如元素在页面正中间，想将它滚动到可见区域，必须有向上滚和向下滚这2种做法。如果你希望他向上滚。一种，.scrolllntoView()默认跟页面顶部对齐： ?...一种，方法.scrolllntoView(false)默认与页面底部对齐： ? 8)为什么会有上下之分？有的时候网页是有遮罩层: ? 这条区域线才是顶部: ? 9)一般用底部？...一般来说，会用顶部，默认的不传参，情非得已的情况下才会传参。 10)如何判定这个页面需要不需要这种滚动操作呢？如果你的被测系统某一个页面当中，因为太长了出现了滚动条，怎么做呢？

12.6K1 0

iOS微信浏览器input聚焦导致页面上移，不能恢复的解决方法

H5页面在iOS系统微信浏览器中，input focus 聚焦时页面会被上推，导致页面整体上移。...解决办法：比较简单的思路， input 失焦时，页面滚动到顶部（以 jQuery 为例）： $('input').on('blur',function(){ window.scroll(0,0...); }); javaScript 实现： document.getElementById('#input').addEventListener('blur', function () { window.scrollTo...(0, 0) //页面滚动到顶部 }, false ) 我的项目是 Vue 写的， Vue 中有一个 @blur 属性，可以直接封装一个方法，直接在失焦时调用：页面顶部) }, 20); } else { return } }) } else { return

3.8K1 0

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

native 的虚拟键盘弹出input 文本框上提及其置顶显示 ---- 解决方案1：在各个的input输入框用标签包起来，例如： javascript:void(...0);”> 解决方案2：在于你的布局，可以用定位position:fixed;来做处理，因为他相对于页面来说，定位于屏幕一定的位置。 ...以下代码用于直接将文档流中的元素移动到视区内，Android5.0+有效(只测了5.0和5.1，其他未知)，IOS没测过。...获得浏览器可视区域的位置： var viewTop = $(window).scrollTop(), // 可视区域顶部 // 可视区域底部 // 不使用jQuery var viewTop = document.body.scrollTop...// 调整视窗位置 $(window).scrollTop(value); // 调整value // 不使用jQuery window.scrollTo(0, value); // 调整value

1.4K2 0

jQuery

1.jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。...jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。...name="" value="加入购物车" class="add"> View Code 例子：置顶菜单+滚动到顶部...jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。...学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。

5K2 0

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

// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...，但是浏览器滚动条默认行为也有效 // scrollBar: true, // //设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用...paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements: ".nav", // //是否可以使用键盘方向键导航...// //滚动到最顶部后是否连续滚动到底部 // loopTop: true, // //滚动到最底部后是否连续滚动到顶部 // loopBottom: true...paddingBottom: "100px", // //固定的元素，为jquery选择器；可用于顶部导航等 // fixedElements: ".nav", // //是否可以使用键盘方向键导航

13.5K3 0

点击加载更多

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

fullPage.js全屏滚动插件

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

06-移动端开发教程-fullpage框架

06-移动端开发教程-fullpage框架

返回顶部的五种实现方法

实现单页浮动导航效果的 jQuery 插件：Smint

scrollIntoView()方法导致整个页面产生偏移

页面滚动，元素跳动；附带jquery.scrollex.js插件

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

js滚动到页面顶部

H5C3第四节

jquery 置顶按钮

高效Web开发的10个jQuery代码片段

如何仅使用 JavaScript 将任何 HTML 页面或表单转化为 PDF文件

Js处理滚动条和日期框

iOS微信浏览器input聚焦导致页面上移，不能恢复的解决方法

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

jQuery

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐