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. 利用CVE-2018-0950漏洞自动窃取Windows密码

    i春秋作家:浅安 0×00 前言 记得还在2016年的时候,我的一个同事那时还在使用CERT BFF(自动化模糊测试工具),他向我询问到如何将微软办公软件中看起来可利用的漏洞转化成可以运行的病毒程序并 ...

  2. PHP 调试工具Xdebug安装配置

    ## PHP 调试工具Xdebug安装配置 一.Xdebug 介绍 Xdebug是一个开源的PHP程序调试工具,可以使用它来调试.跟踪及分析程序运行状态.当然,Xdebug需要结合PHP的编辑工具来打 ...

  3. Upgrade Win10

    Internal deployment of Windows 10 Enterprise is currently underway as a phased deployment. Watch you ...

  4. .gitignore总结

    git进行管理时,.gitignore是必不可少的,可以指定不需要提交到仓库的资源.最好在git init之后就创建 .gitignore文件,这是个好习惯,常用的配置及说明如下:

  5. SQLAlchemy的ORM

    表关系: 表之间的关系存在三种:一对一.一对多.多对多.而SQLAlchemy中的ORM也可以模拟这三种关系.因为一对一其实在SQLAlchemy中底层是通过一对多的方式模拟的,所以先来看下一对多的关 ...

  6. odoo开发笔记-tree列表视图拖拽排序

    odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 &qu ...

  7. 基于GTK+3 开发远程控制管理软件（C语言实现）系列二 Centos7下开发环境搭建

    一.安装gcc gcc-c++ make等编译工具 yum install gcc gcc-c++ kernel-devel 这一步,其实可以不用做,你在安装Centos7的时候,如果选择开发模式安装 ...

  8. Scanner的概述与String类的构造和使用_DAY12

    1:Scanner的概述(理解) 1)Scanner是JDK5以后出现的方便我们从键盘接受数据的类. 2)Scanner的构造格式: Scanner sc = new Scanner(System.i ...

  9. android开发学习——day6

    关于UI的几个插件学习 button和textview,以及点击button利用Toast提醒,editText private EditText editText; @Override protec ...

  10. dubbo-001--前言

    1,前言: 第一次了解dubbo是在15年刚工作的时候在瑞友,项目是给凯撒旅游公司签证部做一个签证系统,项目需要调用一些凯撒的方法,比如权限.部门信息,跟签证相关的一些如签证国家城市.领区啥玩意的,等 ...