点击返回顶部的实现

在jsp页面中的head部分添加:

<style type="text/css">

a.backToTop{width:60px; height:60px; background:#eaeaea url("${basePath}groupon/images/top.gif") no-repeat -51px 0; text-indent:-999em}

a.backToTop:hover{background-position:-113px 0}

</style>

<script type="text/javascript" src="${basePath}js/jquery_js/jquery_1.9.1.js"></script>

<script type="text/javascript" src="${basePath}groupon/js/gotoTop.js"></script>

<script type="text/javascript">

$(function(){

$(".backToTop").goToTop();

$(window).bind(‘scroll resize‘,function(){

$(".backToTop").goToTop({

pageWidth:1120,

duration:0

});

});

});

</script>

gotoTop.js内容如下:

// JavaScript Document

(function($){

var goToTopTime;

$.fn.goToTop=function(options){

var opts = $.extend({},$.fn.goToTop.def,options);

var $window=$(window);

$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $(‘html‘) : $(‘body‘)) : $(‘html,body‘); // opera fix

//$(this).hide();

var $this=$(this);

clearTimeout(goToTopTime);

goToTopTime=setTimeout(function(){

var controlLeft;

if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {

controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;

}else{

controlLeft = $window.width()- opts.pageWidthJg-$this.width();

}

var cssfixedsupport=/msie/.test(navigator.userAgent.toLowerCase()) && parseFloat($.browser.version) < 7;//判断是否ie6

var controlTop=$window.height() - $this.height()-opts.pageHeightJg;

controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;

var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;

if (shouldvisible){

$this.stop().show();

}else{

$this.stop().hide();

}

$this.css({

position: cssfixedsupport ? ‘absolute‘ : ‘fixed‘,

top: controlTop,

left: controlLeft

});

},30);

$(this).click(function(event){

$body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);

$(this).blur();

event.preventDefault();

event.stopPropagation();

});

};

$.fn.goToTop.def={

pageWidth:1120,//页面宽度

pageWidthJg:2,//按钮和页面的间隔距离

pageHeightJg:60,//按钮和页面底部的间隔距离

startline:30,//出现回到顶部按钮的滚动条scrollTop距离

duration:200,//回到顶部的速度时间

targetObg:"body"//目标位置

};

})(jQuery);

$(function(){

$(‘<a href="javascript:;" class="backToTop" title="返回顶部">返回顶部</a>‘).appendTo("body");

});

图片见附件。

时间: 2024-07-31 20:32:10

点击返回顶部的实现的相关文章

Jquery点击返回顶部

<a href="#top" class="goToTop" style=" display: inline;">返回顶部</a> css样式: .goToTop a { color: #666; } .goToTop { background: url(../Scripts/top.png) no-repeat; display: none; position: fixed; top: 50%; margin-top:

在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .lala{ width: 10%; background: pink; color: #333; height: 200px; overfl

Web前端 页面功能——点击按钮返回顶部的实现方法

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) html代码 <a href="javascript:scroll(0,0)">

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi

scroll滚动到一定距离触发事件/返回顶部animate

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .box{ width: 960px; height: 1800px; bac

返回顶部的3中方法(解决移动端使用zepto没有滑动的效果)

点击返回顶部,三种方法 1.这个方法jQuery使用正常,zepto使用没有动画 //zepto没有动画 $("body").animate({scrollTop: 0}, 500) //zepto使用 $("body").scrollTop(0); 2.这个方法jQuery使用正常,zepto使用没有动画 window.scrollTo(0,0); 3.zepto使用可以有动画 function goTop(acceleration, time) { accele

网页返回顶部之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

简单返回顶部代码及注释说明

最近做了一个排行榜页面,分类较多,并且以图文形式展示......最后页面明显过长了,用户体验自然不够好.最后想着在页面上部增加了页面内跳转导航,直接导航到本页的分类命名锚块.当然这就需要结合“返回顶部”功能来取得更好的体验了.当然一般情况下首先还是要避免页面过长,内容薄弱关联性不够的跳出率会很高. 下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 h

转载 | 网页中返回顶部代码(多种方法)

1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 <a href="#top" target="_self">返回顶部</a> 方法二:操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置) <a href="javascript:scroll(0,0)">返回顶部</a>