返回顶部demo

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="js/jquery.js"></script> <script src="js/test.js"></script> &…

一句jQuery代码返回顶部

一句jQuery代码返回顶部效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script ty…

jQuery实现返回顶部

由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(function(){ var scroll_top = $(document).scrollTop(); if(scroll_top != 0){ $(".to_top").show(); }else{ $(".to_top").hide(); } }); $("…

使用Javascript实现返回顶部功能。

为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下面,我分享一下我自己经常使用的一个返回按钮,当然,你也可以在这个基础上修改或者自己做一个. 示例:http://www.feikk.com/demo/go_top.html 建议将以下代码放在包函文件中,这样不必每个页面都添加,日后也好维护. 正文如下: 一.先调用jquery. <!-- 这里是用…

编写jQuery插件--实现返回顶部插件

国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合污了!就做个‘沉默’的程序猿吧!(总有一天会猿球崛起)嘿嘿. 牢骚到底为止,好的心情才是重要的,本来猝死的几率就那么大了,就不要再往上飙数字了.不快的心情留在公司,快乐的在家里写blog. 有一段时间没有写blog了(恍恍惚惚的过了这些天,买了几本书,看了,字全认识,意思全没看进去),也没有一个清晰…

简约的返回顶部效果（jQuery）

博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 jQuery 的,用起来还不错. 常见的“返回顶部”分这么3种:把返回顶部按钮放在页面最底部的,返回顶部按钮在滚动距离大于一定的距离后显示出来的,还有就是滚动距离大于 0 的时候就显示出来,喜欢最后这种,嗯,就它了~ 做好了贴出来共享下:) HTML: 用两个 span 标签去模拟一个向…

原生js返回顶部（匀速、由快到慢）

在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设置scrollTop为0. // 兼容写法 document.body.scrollTop = 0: document.documentElement.scrollTop = 0; But,以上都是直接返回,不带任何过渡效果.作为有追求的前端,这太low了. 以下提供两种带过渡效果的原生方法和一种j…

jQuery返回顶部实用插件YesTop

只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.js),然后一句代码就可以实现返回顶部:引用代码:<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script src="http://h…

返回顶部的功能 div固定在页面位置不变

1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用呢?反正我用了感觉没啥用. 2.还有一种就是JS控制了.我写的是随着滚动滚动 ,计算div的绝对与可视页面的位置不变. $(window.parent).on('scroll',function(){ $(返回顶部所在div选择器).css('top',parent.document.documen…

jquery 返回顶部兼容web移动

返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree" title="返回顶部"></span> <style type="text/css"> #tophovertree{display:block;position:fixed;width:36px;height:36px;righ…

zepto返回顶部动画

点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0;…

js实现返回顶部功能的解决方案

很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯js,带动画版本生硬版: var scrollToTop = window.setInterval(function() { var pos = window.pageYOffset; if ( pos > 0 ) { window.scrollTo( 0, pos - 20 ); // how…

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ch…

qq空间返回顶部代码

点击这里体验效果以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equ…

jquery返回顶部，支持手机

jquery返回顶部,支持手机效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head>…

网页返回顶部之animate方法

点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{width:45px; height:45px; position: fixed; left:50%; bottom:120px; border:solid 1px #ccc; background: #fff; margin-left: 600px; text-align: center; line-hei…

jQuery 一句代码返回顶部

兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="position:fixed;bottom:20px;right:20px;">Back to top</a> <script> $('.top').click(function (e) { $('html, body').animate({scrollTop: 0}, 8…

jquery 实现返回顶部

//Html代码: <div class="backToTop" title="返回顶部">返回顶部</div> //代码 //CSS代码: .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px ; background-color: #; color: #fff; font-size: 12px; text-align: center; posit…

iOS点击状态栏返回顶部问题。

在适配点击状态栏返回顶部的时候,有一个viewcontroller里面有一个UITableView和一个UITextView,UITableView的cell里面没有UIScrollView和UITableView,点击状态栏没有返回顶部,后来想了很久,才想起UITextView是可以滑动的,它是继承于UIScrollView<UITextInput>的,需要将UITextView 的scrollsToTop设置为NO.…

转载：jQuery实现返回顶部功能

转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图第一种实现一.JSP或HTML(主体结构) 在body中添加 <body id="top"> <p id="back-to-top"><a href="#top"><span>…

原生js实现简洁的返回顶部组件

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~(本博客返回顶部的功能就使用的是这个组件) 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现…