原生JavaScript实现页面回到顶部的功能

/*如果想实现点击一个按钮让滚动条回到最顶部的功能,首先可能就会想到它是从底部位置移动到顶部的位置它是一个运动的过程,只要知道当前位置(current Position)和想要到达的位置(target Position)不就可以啦只不过以前用的都是元素div啦 img啦等等等现在不过是把元素的移动换成滚动条的移动好了上代码我尽量写的清晰一点*/ function $(id){return document.getElementById(id);} //通过ID获取元素 functio…

【JavaScript Demo】回到顶部功能实现

随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布局 (1) 我们先简单的搭建一个长度为1200px的页面,保证视口的高度足够. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta…

js——页面回到顶部

很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面回到顶部</title> <link rel="stylesheet&quo…

jQuery实现页面回到顶部功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>回到顶部</title> <style type="text/css"> body { height: 8000px; } h1{ color: #000; } img { position: fixed; bottom: 50px; right: 50px;…

【JQ+锚标记实现点击页面回到顶部】

前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑着走的,还给小白挥了挥手,微笑一个.那句话叫什么来着,佛祖虽给你关了一扇门,说不定会再给你开一扇窗.明天我就换工作了,我感谢我的同学. a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方…

页面回到顶部的三种实现(锚标记，js)

一.使用锚标记返回页面顶部使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么. 页面顶部放置: <a name="top" id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠近顶部即可. 页面底部放置: <a href="#top" target="_self">返回顶部</a> 二.使…

JavaScript实现网页回到顶部效果

在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top" style="display:block;"> <a href="#top"> <span>返回顶部</span> </a> </p> CSS代码: /* 返回顶部开始 */ #back-t…

jQuery实现“回到顶部”按钮功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> .back_top{ position: fixed; background:gray; color: #ffffff; padding: 5px; bottom: 30px; right: 30px…

jQuery-使页面回到顶部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>back-top</title> <style type="text/css&qu…

jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

▓▓▓▓▓▓ 大致介绍学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写的也要是面向对象的,看看基本的结构 // 定义lQuery对象 function lQuery(lArg){ } function lQ(lArg){ return new lQuery(lArg); } // css()方法 lQuery.prototype.css = function(){};…

使用 jQuery 页面回到顶部

JS实现页面回到顶部效果

[代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>home</title> </head> <style> *{ padding:0; margin:0; } .box{ width:1190px; /*只有设置了宽度才能设置居中效果*/ margin:0 auto; /*…

【原生js实现一键回到顶部】

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .uptop { position: fixed; /*//位置固定*/ bottom: -50px; /*//距离底部-50px,为了使一开始不显示*/ right: 10px; /*//距离右边10px*/ width: 50px; z-index:…

页面中引入mui 地址选择，点击页面中其他input时页面回到顶部

问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到一个方法,只需要加一个css 属性就ok. 解决办法:在body中添加 overflow: scroll; -webkit-overflow-scrolling: touch;属性,如果只加overflow:scroll;在苹果手机浏览器上会出现滚动不顺畅的情况,再加上-webkit-overflo…

原生javascript实现下拉框搜索功能

由于业务需求,要实现一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现了搜索功能. 未搜索前如下图: 搜索后: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev…

原生JavaScript实战之搜索框筛选功能

成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> <input type="text" class="sText"> <span class="btn" sex="m">Male</span> <span class="btn&quo…

jquery 插件页面回到顶部

引用: jquery.scrollUp.min.js js: $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300', // Distance from top before showing element (px) topSpeed: 300, // Speed back to top (ms) animation: 'fade', // Fade, slide, none animationInSpeed:…

通过js实现回到顶部功能

许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧我总结了一下会用到的知识以及js方面的方法: 1.简单的html及css布局 2.js函数中函数 window.onload方法 //让整个页面渲染完成后再加载 window.onscroll方法 //用户滚动滚动条时触发可以修改<a>标签回到顶部样式同时清除计时器,使得在回到顶部的过程中,…

js实现回到顶部功能

js实现回到顶部功能一.总结一句话总结: 可以通过js或者jquery可以很快的控制页面的属性,比如高度等等 //设置当前视口的顶端数值 var setScrollTop = function(top){ if (document.compatMode == "BackCompat") { document.body.scrollTop = top; } else { if(document.documentElement.scrollTop == 0){ document.bod…

js回到顶部------转载

[1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 1 2 3 4 <body style="height:2000px;"> <div id="topAnchor"></div> <a href="#topAnchor" st…

jacascript 滚动 scroll 与回到顶部

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: scrollWidth 表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分: 没有滚动条时,scroll 和 client 属性的结果相等,即 scrollWidth= padding + width: scrollHeight= padding + height: 存在滚动条时,但元素设…

jQuery之回到顶部

实现回到顶部的功能,根据学了元素滚动实现,温习知识点. 做之前先理清一下步骤和思路: 1.获得页面的滚动长度 var $page = $("html,body"); var distance = $("html").scrollTop()+$("body").scrollTop(); 2.设置总时间 var time = 500; 3.设置间隔时间 var intervalTime = 50; 4.使用循环定时器不断滚动 5./到达顶部, 停止定…

CSS小知识---回到顶部

所需js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 在body中添加 <a id="goTop" class="gotoTop" href="#"><img src="images/top.png"></a> .gotoTop的sty…

原生JavaScript技巧大收集100个

原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.substr(i, 1); if (patrn.ex…

100个常用的原生JavaScript函数

1.原生JavaScript实现字符串长度截取复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\xff]/; var strre = ""; for (var i = 0; i < str.length; i++) { if (icount < len - 1) { temp = str.…

iOS点击状态栏回到顶部底层实现原理

在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个属性的解释: // When the user taps the status bar, the scroll view beneath the touch which is closest to the status bar will be scrolled to top, but only if…

你可能不需要 jQuery！使用原生 JavaScript 进行开发

很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用. 然而,另一方面,作为前端开发的基础框架,jQuery 包含大量的兼容性代码和扩展功能,其中有很多在你的整个项目中可能都不会用到.其实如果你只是针对现代浏览器,很多功能使用原生的 JavaScript 就可以实现,即使是拖后腿的低版本 IE 浏览器,兼容性也是很容易处理的. 您可能感兴趣的…

原生 JavaScript 代码和Jquery实现对比

下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html 类似的还有很多很多,可以参考这里:http://youmightnotneedjquery.com/.…

html css jquery 回到顶部按钮

今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; bottom: 15px; z-index:; font-size: 25px; width: 40px; height: 40px; background-color: #adadad; color: #ffffff; cursor: pointer; border-radius: 2px; t…

关于Android PullTorefreshScrollview回到顶部实例

列表滑动下面显示按钮,点击按钮回到顶部的功能,一般scrollview会有滑动监听的事件,通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了,但是PullTorefreshScrollview通过getRefreshableView()方法得到scrollview后没有setOnScrollChangeListener()滑动监听事件,没办法只能通过setOnTouchListener()事件来判断. onTouchListener方法,只能监听…

【原生JavaScript实现页面回到顶部的功能】的更多相关文章