返回顶部js

backToTop.js:

(function () {
    var $backToTopEle = $(‘<div class="backToTop"></div>‘).appendTo($("body"))
        .click(function () {
            $("html, body").animate({ scrollTop: 0 }, 120);
        }), $backToTopFun = function () {
            var st = $(document).scrollTop(), winh = $(window).height();
            (st > 0) ? $backToTopEle.show() : $backToTopEle.hide();
            //IE6下的定位
            if (!window.XMLHttpRequest) {
                $backToTopEle.css("top", st + winh - 166);
            }
        };
    $(window).bind("scroll", $backToTopFun);
    $(function () { $backToTopFun(); });
})();

样式设置:

.backToTop {
    display: none;
    background:url(../images/go_top.gif);
    background-repeat:no-repeat;
    background-position:0px 0px;
    width:50px;
    height:50px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: fixed;
    _position: absolute;
    right: 2px;
    bottom: 2px;
    _bottom: "auto";
    cursor: pointer;
    opacity: .6;
    filter: Alpha(opacity=60);
}
.backToTop:hover
{
    background:url(../images/go_top.gif);
    background-repeat:no-repeat;
    background-position:0px -100px;
}
时间: 2024-10-16 06:39:57

返回顶部js的相关文章

返回顶部 JS 图片 悬浮

1.首先创建“返回顶部”元素 <!-- toTop --> <div id="toTop" style="position: fixed; z-index:99; bottom:89px; right:60px; display:none;" > <a href="javascript:scroll(0,0)"><img src="${pageContext.request.contextPat

弹性返回顶部JS代码

弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

手机端网页返回顶部js代码

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>手机端网页返回顶部js代码</title>  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.m

常用小的特效(确认删除弹窗、返回顶部)

1.确认操作(如删除)弹窗. <script language="javascript"> function delcfm() { if (!confirm("确认要删除?")) { window.event.returnValue = false; } } </script> <input name="" type="submit" value="删除" onClick=&q

博客园安装jQuery返回顶部代码教程

博客园支持上传js文件,这给博主提供了很大的拓展空间,例如返回顶部的jQuery代码. 首先先上传返回顶部图片到博客园 topback.gif: 然后在scrolltopcontrol.js中找到topback.gif的地址,将其替换成上传至博客园中的文件地址(右键topback.gif → 复制链接地址) scrolltopcontrol.js 代码: var scrolltotop={ setting:{ startline:100, //起始行 scrollto:0, //滚动到指定位置

原生JS返回顶部,带返回效果

有些网站当滑到一定高度时右下角会有一个按钮,你只要一点就可以直接返回顶部了.那这个功能是怎么做到的呢.其实不算太难: 首先我们先在网页中创建一个按钮,上面写上返回顶部,把它的样式改成固定定位,之后想要什么样式都可以自己写上,再在上面设置一个id: 之后我们js中获取一下这个按钮的id,并且定义一个变量timer,方便接下来清除间隔器: 之后我们设置一个页面的滚动事件,在里面定义一个变量获取一下所滚动的高度: 再用一个判断语句来判断一下滚动的高度:我们在设置一个数来让按钮什么时候显示: var o

js返回顶部效果

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

js&quot;返回顶部&quot;功能实现

JS代码: <script src="../../static/js/base/jquery/jquery.min.js"></script> <script>//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失$(function () { $("#sidepanel").fadeOut(100); $(window).scroll(function(){ if ($(window).scrollTop()>

JS——给网页添加返回顶部按钮

在页面右下方添加一个返回顶部按钮,当页面滑到一定位置时,按钮出现,否则消失,默认隐藏 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style type="text/css"> 7 .content{ wid