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. apache ab

    ab -p postfile.json -T 'application/json' -n 100 -c 10 -v 2 http://192.168.1.103:3002/checkStashSlot ...

  2. [JavaScript] Nginx实现跨域设置

    假如跨域请求的接口为:http://xxx.cn/was5/web/search Nginx配置: 在conf/nginx.conf文件中 location / { root html; index ...

  3. [vue] [axios] 设置代理实现跨域时的纠错

    # 第一次做前端工程 # 记一个今天犯傻调查的问题 -------------------------------------------------------------------------- ...

  4. POJ 2491

    #include<iostream>#include<stdio.h>#include<string>#define MAXN 400using namespace ...

  5. CDH 版本子节点启动问题

    今天下午整整为了启动一个节点瞎忙活一下午,惨痛的教训还是记录下来吧,毕竟付出了代价.事情原委,一个同事在一台机器上占用了大量内存训练CTR点击率模型,而这台机器上部署了分布式Hadoop的一个data ...

  6. Redis学习系列一Linux环境搭建

    1.简介 Redis是互联网技术架构中在存储系统中用的最广泛的中间件,是中高级后端工程师技术面试中面试官最喜欢问的工程技能之一.所以Redis是.Net技术开发必须掌握的技能之一.所以通过这个系列的随 ...

  7. ES6快到碗里来---一个简单的爬虫指南

    学习ES6的时候,没少看ES6入门,到现在也就明白了个大概(惭愧脸).这里不谈ES6,只谈怎么把ES6的页面爬下来放到一起成为一个离线文档. 之前居然没注意过作者把这本书开源了..瞎耽误功夫...地址 ...

  8. Kafka消息存储原理

    kafka消息存储机制 (一)关键术语 复习一下几个基本概念,详见上面的基础知识文章. Broker:消息中间件处理结点,一个Kafka节点就是一个broker,多个broker能够组成一个Kafka ...

  9. Mac终端配置，DIY你的Terminal （iTerm 2 + Oh My Zsh）

    使用mac osx一年以来,自带的Terminal终端一直都是白底黑字,食之无味,越来越缺乏新鲜感,怎么也得想个法子来刺激下眼球. 不然花那么多大洋买你回来是要哪般,难道真是为来学习工作??? 怎么可 ...

  10. redisTemplate实现轻量级消息队列, 异步处理excel并实现腾讯云cos文件上传下载

    背景 公司项目有个需求, 前端上传excel文件, 后端读取数据.处理数据.返回错误数据, 最简单的方式同步处理, 客户端上传文件后一直阻塞等待响应, 但用户体验无疑很差, 处理数据可能十分耗时, 没 ...