zoukankan      html  css  js  c++  java
  • jquery滚动条平滑滑动

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

    滚动到顶部:

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

    滚动到指定位置:

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


    完整实例源码参考:


    <!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-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js平滑滚动到顶部、底部、指定地方</title>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
    <style>
     .box{ height:200px; 100%; background:#ccc; margin:10px 0;}
     .location{ position:fixed; right:0; bottom:10px; 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">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</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>

  • 相关阅读:
    xcode swift对应版本
    VM12安装OS X10.11步骤及说明
    Java开发Webservice的组件
    xml文件格式说明
    android开发中在界面上实现曲线图的几个开源项目
    C#中SQL Server数据库连接池使用及连接字符串部分关键字使用说明
    c#对数据库访问完应关闭连接
    I2C VHDL程序
    数码管一些列功能的verilog实现
    PWM控制灯亮暗的verilog实现
  • 原文地址:https://www.cnblogs.com/jasonxiaoqinde/p/7516297.html
Copyright © 2011-2022 走看看