【原文链接】

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

【示例演示地址】

 <!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://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>

js平滑滚动到顶部,底部,指定地方的更多相关文章

  1. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

  2. js滚动到顶部底部代码

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>SCROLL</t ...

  3. JQuery - 点击，滚动回到顶部 / 底部刷新回到顶部

    if ($(document).scrollTop() != 0) { //刷新之后,回到顶部 $('body,html').animate({ scrollTop: 0 }, 500); }

  4. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  6. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

  7. 使用jquery animate实现锚点慢慢平滑滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...

  9. js-点击按钮页面滚动到顶部，底部，指定位置

    之所以笔记一下这个,因为我在项目中经常用到. $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, ...

随机推荐

  1. zepto和jquery的区别，zepto的不同使用8条小结

    说到诡异事件发生的原因,自然是想到两者之间的差异性. 首先是效果: jquery中有fadeIn和fadeOut两个效果,用来实现渐隐渐显的效果,这个在PC端自然是常用的效果.然后我们前端组的组员Mr ...

  2. 非常简单的数据，支持excel表格下载功能

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  3. Linux操作系统备份之二：通过tar拷贝分区实现Linux操作数据的在线备份

    http://www.tektea.com/archives/2163.html. 在<Linux操作系统备份之一:使用LVM快照实现Linux操作系统数据的在线备份>文章中,我们介绍了使 ...

  4. Mysql 数据库中所有列名为某个值的 sql 语句

    SELECT DISTINCT TABLE_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE COLUMN_NAME IN ('columnname') AND T ...

  5. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

  6. Hash

    创建(特殊的) Hash[] Hash[‘a’,1,’b’,2]->yes Hash[‘a’,1,’b’,’b’]->no Hash[[[‘a’,1],[‘b’,2]]]->yes ...

  7. 【原创】Android ExpandableListView使用

    ExpandableView的使用可以绑定到SimpleExpandableListAdapter,主要是看这个Adapter怎么用. 这个类默认的构造函数有9个参数, 很好地解释了什么叫做又臭又长. ...

  8. SSM——（二）：easyUI的CRUD

    1.在WebContent下新建admin目录,添加index.html(用来显示user表的CRUD): 总结: 1.datagrid接收的必须是json数据: 2.使用分页插件会自动向后台传递St ...

  9. Node.js怎么处理数据库中日期类型

    问题描述:在数据库里存储时间的时候明明显示的是类如2016-12-22的形式,读取出来后却变成了大概是这样的:Fri May 17 2016 14:12:33 GMT+0800 (中国标准时间) 处理 ...

  10. 个人作业-Week2 案例分析

    微软必应词典客户端的案例分析 第一部分 调研,评测 1)bug: 运行平台:iOS 10.0.2 必应词典版本:4.2.2 1. bug标题:词库加载错误 bug详细描述:学习界面中的经典词库出国考试 ...