zoukankan      html  css  js  c++  java
  • js平滑滚动到顶部,底部,指定地方

    采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上。

    滚动到顶部:

    $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

    滚动到指定位置:

    $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

    滚动到底部:

     $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});

    源代码:

    <!DOCTYPE>
    <html>
    <head>
    <meta charset=utf-8" />
    <title>js平滑滚动到顶部、底部、指定地方</title>
    <script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
    <style>
        .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};
    </style>
    </head>
    
    <body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box a">产品介绍产品介绍 http://www.daixiaorui.com 产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></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>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 
            $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});
            $('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});
        });
    </script>
    </body>
    </html>

    文章出自:http://www.daixiaorui.com/read/92.html ,只为收藏学习!谢谢!

  • 相关阅读:
    对<Effective Python: 编写高质量Python代码的59个有效方法>中知识点的总结和扩展
    那些年在使用python过程中踩的一些坑。
    java学习心得——Hutool工具类ExcelUtil
    java学习心得——String对象Replace
    java学习心得——Quartz 自定义定时器的操作
    ThoughtWorks.QRCode 生成二维码名片(实现二维码内容换行)
    这么多年第一次自己去用游标和临时表
    BASE64码转图片
    Sql常用函数
    关于EF查询表里的部分字段
  • 原文地址:https://www.cnblogs.com/iyitong/p/4682859.html
Copyright © 2011-2022 走看看