jquery返回顶部 滑到底部

 <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
    <div class="box bottom"></div>
    <div class="location">
        <p class="scroll_top">返回顶部</p>
        <p class="scroll_a">产品介绍</p>
        <p class="scroll_bottom">滑到底部</p>
    </div>

css:

.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}
 .location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};

js:

  <script type="text/javascript">
    $(function() {
        $(‘.scroll_top‘).click(function() {
            $(‘body,html‘).animate({
                scrollTop: ‘0px‘
            }, 900);
        });
        $(".scroll_bottom").click(function() {
           $(‘body,html‘).animate({
            scrollTop:$(".bottom").offset().top
           },800);
        });

    });
    </script>
时间: 2024-10-10 21:15:28

jquery返回顶部 滑到底部的相关文章

jQuery返回顶部(精简版)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery返回顶部</title> <style> *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖动 */} *body #t

jquery返回顶部-ie6配合css表达式。

css: .wraper{ width:980px; height:2048px; margin:0 auto; background:#ccc; } /*返回头部*/ #backToTop a{ display:block; cursor:pointer;width:25px; height:26px; text-indent:-9999em; position:absolute; left:0; top:0; z-index:10;} #backToTop .bt_bg{ backgroun

jQuery返回顶部的两种方法(包括go-top.js)

jQuery实现网页"返回顶部"的功能,相信见到这种效果已经不稀奇了吧;那究竟如何实现呢?方法还是挺多了,先介绍两种简单的: 第一种,只使用jquery插件来实现,下面是一个完整的代码例子,有兴趣的自己摸索吧:前端UI分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

jquery返回顶部,支持手机

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

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

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

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

jquery返回顶部特效

<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:30px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ transition:color 1s; -moz-tra

JavaScript/Jquery返回顶部代码

<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.8.2.js"></script> <style type="text/css">

jQuery返回顶部代码

页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body").append($("<div id='totop'></div>")); $("#totop").hide(); $(window).scroll(function () { if ($(window).scrollTop() > 1