js平滑滚动到顶部、底部、指定地方

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js平滑滚动到顶部、底部、指定地方</title>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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">这部分是产品介绍.这部分是产品介绍这部分是产品介绍这部分是产品介绍这部分是产品介绍</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>

</body>

</html>

<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>

[js常用]页面滚动的顶部,指定位置或底部,平滑滚动的更多相关文章

  1. 获取一个元素距离顶部的位置和window的滚动值

    获取一个元素距离顶部的位置: $(".box").offset().top; 获取window的滚动值: $(window).scrollTop();

  2. js刷新页面不回到顶部

    今天遇到刷新页面不回到顶部的需求 window.location.reload();方法已经解决了问题,但是ie8不支持,后来采用的是锚点这个方法 window.location = '/plan/g ...

  3. JS对象 charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

    返回指定位置的字符 charAt() 方法可返回指定位置的字符.返回的字符是长度为 1 的字符串. 语法: stringObject.charAt(index) 参数说明: 注意:1.字符串中第一个字 ...

  4. js 刷新页面自动回到顶部

    <script type="application/x-javascript"> addEventListener("load", function ...

  5. js中json的添加和指定位置的删除

    0]绑定数据 grid = $("#Grid").datagrid({ fit: true, rownumbers: true, fitColumns: true, height: ...

  6. ListBox滚动条 刷新列表之后 指定位置(置顶或滚动到最后)

    参数ObservableCollection<T>类型 滚动条在最上 ListBox.ScrollIntoView(ListBoxOC[0]);滚动条在最下 ListBox.ScrollI ...

  7. js 获取滚动位置，滚动到指定位置，平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  8. js 动画滚动到指定位置 ES6

    ### 开始 ### 写一个自动滚动过度到指定位置的一个函数 通过Class进行封装 /** * 滚动动画过度 * @param {Object} position 定位(只支持Y轴) * @para ...

  9. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

随机推荐

  1. 牛客第二场 C.message（计算几何+二分）

    题目传送:https://www.nowcoder.com/acm/contest/140/C 题意:有n个云层,每个云层可以表示为y=ax+b.每个飞机的航线可以表示为时间x时,坐标为(x,cx+d ...

  2. es6 学习小记 扩展运算符 三个点（...）

    参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...

  3. nginx和tomcat访问图片和静态页面的配置方法

    生产环境下,有时候需要访问图片,正常需要应用ftp.nginx等配套使用,但是有时候为了简化,可以用以下的两种简单的访问,说实话,就是为了偷懒,但是效果是能有的,这就行了,所以今天做这个简化版的方便大 ...

  4. linux定时重启tomcat服务的脚本学习

    要求:在linux中定时重启一个tomcat服务 一:shell脚本即Shell Script [1],Shell脚本与Windows/Dos下的批处理相似,也就是用各类命令预先放入到一个文件中,方便 ...

  5. vue中封装公共方法，全局使用

    1.以封装的合并单元格为例,首先建立一个util.js 2.在main.js中引用 3.直接在使用该方法的地方调用就可以了

  6. 09-04 java 接口

    接口的引出 继续回到我们的猫狗案例,我们想想狗一般就是看门,猫一般就是作为宠物了,对不.但是,现在有很多的驯养员或者是驯兽师,可以训练出:猫钻火圈,狗跳高,狗做计算等. 而这些额外的动作,并不是所有猫 ...

  7. jquery获得下拉框值的代码

    jquery获得下拉框值的代码   获取Select :  获取select 选中的 text :  $("#ddlRegType").find("option:sele ...

  8. Ubuntu下安装qq方法及疑难问题解决

    在Ubuntu下安装qq有两种方法:.tar.gz包安装和.deb包安装下载地址:http://im.qq.com/qq/linux/download.shtml 方法一:.tar.gz包安装法 .t ...

  9. 常用的Maven 插件

    Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成. 例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应了一个插 ...

  10. DOS在这里

    转自: http://blog.csdn.net/rheostat/article/details/8043835 在右键菜单中添加Dos快捷通道-dos在这里 在右键菜单中添加 Dos 窗体 不用每 ...