基于JS实现回到页面顶部的五种写法(从实现到增强)

这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意]关于锚点的详细信息移步至此 ? 1 2 3 4 <body style="height:2000px;">…

JS实现回到页面顶部动画效果 2016.03.23

最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight…

js网页返回页面顶部的小方法

咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop.png" alt="" class="gotop" > <div class="gotopdiv" style="display: none;"><span>返回顶部</span&g…

vue 回到页面顶部

模仿Element-UI 回到页面顶部 BackToTop.vue <template> <transition :name="transitionName"> <div class="page-component-up" @click="backToTop" v-show="visible" :style="customStyle"> <i class="…

js关闭当前页面(窗口)的几种方式总结(转)

js关闭当前页面(窗口)的几种方式总结 1. 不带任何提示关闭窗口的js代码代码如下 <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a> 2.自定义提示关闭代码如下: <script language="javascript"> // 这个脚本是 ie6和ie7 通用的脚本 function cus…

JS 跨域问题常见的五种解决方式

一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名.协议和端口号的组合. URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件…

前端页面加载完成事件 - onload，五种写法

在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){}); 前两者本质上没有区别,第1种是第2种的简写方式.两个是document加载完成后就执行方法. 3:使用jQuery的$(window).load(function(){}); 4:使用window.onload = function()…

JS跳转页面常用的几种方法

第0种:(常用) function triggerAOnclick(){ window.open("http://localhost/jwxt/forward/2TrainSchemeDatail.do?trainSchemeId=555") } 上面相当于 <a href = "http://localhost/jwxt/forward/2TrainSchemeDatail.do?trainSchemeId=555" target="_blank&…

js去掉字符串前后空格的五种方法

转载 :http://www.2cto.com/kf/201204/125943.html 第一种:循环检查替换[javascript]//供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s){ if(s == null) { return ""; } var whitespace = new String(" \t\n\r"…

js面向对象的五种写法

第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { return Circle.PI * this.r * this.r; } var c = new Circle(1.0); alert(c.area()); 第二种: //第2种写法 var Circle = function() { var obj = new Object(); o…

JS XMLHttpRequesst对象 http post的五种请求状态

记录一下js中对http请求的几种状态,下附代码 readyState 存有 XMLHttpRequest 的状态.从 0 到 4 发生变化. 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 //此处只做最基本的描述 var xmlobj=new XMLHttpRequest(); xmlobj.open("POST", "/godown/commit", true); //调用weather.php…

js去掉字符串前后空格的五种方法(转)

出处:http://www.2cto.com/kf/201204/125943.html 第一种:循环检查替换[javascript]//供使用者调用 function trim(s){ return trimRight(trimLeft(s)); } //去掉左边的空白 function trimLeft(s){ if(s == null) { return ""; } var whitespace = new String(" \t\n\r")…

js对象之间的"继承"的五种方法

今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = color; } 怎样才能使"猫"继承"动物"呢? 一. 构造函数绑定…

事件处理之二：点击事件监听器的五种写法分类： H1_ANDROID 2013-09-11 10:32 4262人阅读评论(1) 收藏

首选方法二! 方法一:写一个内部类,在类中实现点击事件 1.在父类中调用点击事件 bt_dail.setOnClickListener(new MyButtonListener()); 2.创建内部类 private class MyButtonListener implements OnClickListener{ /** * 当按钮被点击的时候调用 */ @Override public void onClick(View v) { callPhone(); } } 方法二:使用匿名内部类…

JS刷新后回到页面顶部

window.location.href = location.href; 方法一: $(window).scrollTop(0); 方法二:$('html ,body').animate({ scrollTop: -10 }, 300);…

JS实现回到Top(顶部)--JavaScript

当我们浏览一段很长的网页时,已经看到底部了,想回到顶部看前面的内容,可是需要滚动好几转鼠标滑轮或者拉动滚动条走好长“一段路”.这对于用户来说,体验效果是不够好的.如果我们借助简单的一个按钮,点击一下就能回到顶部,这会让用户省很多事,用户体验效果就非常好了. 注意编写程序代码时要解决如下问题: 1.这个按钮如何布局 2.JS如何解决点击按钮回到Top,且回到Top的用户体验最好 3.按钮在怎样的情况下显示如果你没有思路,不用担心,看完代码实现后,你就明白了 1.案例主要的代码 demo.html…

jquery点击回到页面顶部方法

1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-jQuery- 回到顶部案例</title> <style> .bk-top-box { position: fixed; bottom: 40px; right: 10px; cursor: pointer; } </…

今天才知道a标签的href="#"是回到页面顶部

如题,真的是,做了一年多的开发,今天才知道a标签的href="#"是回到顶部.以前一直以为这是个多么了不起的功能. 顺便扩展一下滑动隐藏和显示按钮(从别处拷贝来的代码) $( document ).on( "scroll", function () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; if ( scrollTop > 0 ) { $(&…

点击按钮回到页面顶部或者某个高度时的问题，JQUERY

$('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).animate().大概是因为window是窗口对象,无法来移动.而html,body是DOM对象,可以移动.…

JS 中对变量类型的五种判断方法

5种基本数据类型:undefined.null.boolean.unmber.string 复杂数据类型:object. object:array.function.date等方法一:使用typeof检测当需要变量是否是number,string,boolean ,function,undefined,json类型时,可以使用typeof进行判断:其他变量是判断不出类型的,包括null. typeof是区分不出array和json类型的,因为使用typeof这个变量时,array和json类…

js关闭当前页面(窗口)的几种方式总结

1. 不带任何提示关闭窗口的js代码 <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a> 2.自定义提示关闭 <script language="javascript"> // 这个脚本是 ie6和ie7 通用的脚本 function custom_close(){ if (confirm("您确定要…

【转载】js关闭当前页面(窗口)的几种方式总结

1. 不带任何提示关闭窗口的js代码复制代码代码如下: <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a> 2.自定义提示关闭复制代码代码如下: <script language="javascript">// 这个脚本是 ie6和ie7 通用的脚本function custom_close(){if (c…

js关闭当前页面(窗口)的几种方式

1. 不带任何提示关闭窗口的js代码代码如下: <a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭</a> 2.自定义提示关闭代码如下: <script language="javascript"> // 这个脚本是 ie6和ie7 通用的脚本 function custom_close(){ if (confi…

JS中常用的输出方式(五种)

1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.document.write("要输出的内容"); ->直接的在页面中展示输出的内容 3.console.log("要输出的内容"); ->在控制台输出内容 4.value ->给文本框(表单元素)赋值内容 ->获取文本框中(表单元素)的内容 doc…

JS实现clone()方法，对五种主要数据类型进行值复制

Object.Array.Boolean.Number.String 分为三种情况:普通变量,Array,Object 递归调用…

基于Nuclear的Web组件-Todo的十一种写法

刀耕火种刀耕火种是新石器时代残留的农业经营方式.又称迁移农业,为原始生荒耕作制. var TodoApp = Nuclear.create({ add: function (evt) { evt.preventDefault(); var textBox = this.node.querySelector('input'); this.option.items.push(textBox.value); }, installed: function () { var form = this.no…

js自调用匿名函数的三种写法

第一种: (function(){ console.log(‘hello world”) })() 第二种: (function(){ console.log(‘hello world’) }()) 第三种: !function(){ console.log(‘hello world’) }()…

swift从0加到1000（不包括1000）的五种写法

用了while, do...while, for in, for in ... { temp += i i++ } println(temp) do { temp2 += j j++ } ) println(temp2) ... { temp3 += a } println(temp3) for b in 1..1000 { temp5 += b} PS:..表示不包括上限,...表示包括上限 println(temp5) ; b < ; b++ { temp4 += b; } println(…

茴香豆的第五种写法---设置ExpandableListView系统自带图标按下效果

1 编写groupindicator_selector.xml如下: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_expanded="true" android:drawable=&qu…

JS封装运动框架（另一种写法）

function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; function getStyle(obj, arr) { if(obj.currentStyle){ return obj.currentStyle[arr]; //针对ie } else { return document.defaultView.getComputedStyle(obj, nu…

【基于JS实现回到页面顶部的五种写法(从实现到增强)】的更多相关文章