采用锚点进行页面中的跳转的确很方便，但是要想增加网页的效果，可以使用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; 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>
<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>

jquery滚动条平滑滑动的更多相关文章

  1. 利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

    最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(d ...

  2. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  3. Jquery实现特效滑动菜单栏

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

  4. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  5. Perfect Scrollbar – 完美的 jQuery 滚动条插件

    Perfect Scrollbar 是一个很小的,但完美的 jQuery 滚动插件.滚动条不会影响原来的设计布局,滚动条的设计是完全可定制的.你可以改变几乎所有的 CSS 样式的滚动条,滚动条设计对脚 ...

  6. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  7. 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  8. 原创新闻 11 个最佳 jQuery 滚动条插件

    通过jQuery滚动条插件,你可以换掉千篇一律的默认浏览器滚动条,让你的网站或web项目更具特色,更有吸引力.本文收集了11款非常漂亮.实用的jQuery滚动条插件,你可以轻松将它们应用在自己的网站中 ...

  9. 15个带示例的jQuery滚动条插件

    1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

随机推荐

  1. springboot中JPA的应用

    1.JPA JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关联映射工具来管理Java应用中的关系数据.他的出现主要是为了简 ...

  2. Docker Basic

    1.简介 last 1.简介 1.1目的?一次编译.到处运行: 1.2.是什么? 实现[运行环境和配置文件的]软件容器,方便[持续集成]实现[整体发布]的容器虚拟化技术: 概括:整体发布的[容器虚拟化 ...

  3. spring事务管理实现原理-源码-传播属性

    转载请标识 https://me.csdn.net/wanghaitao4j https://blog.csdn.net/wanghaitao4j/article/details/83625260 本 ...

  4. [Unity插件]Lua行为树(八)：行为节点扩展

    先看一下之前的行为节点是怎么设计的: BTAction.lua BTAction = BTTask:New(); local this = BTAction; this.taskType = BTTa ...

  5. ROS进阶学习笔记（10）- 搭建自己的Turtlebot(5) - Interactive Makers

    用interactive_makers控制Turtlebot移动 interactive_makers 是Willow Garage公司开发的一个虚拟控制工具,可通过鼠标在虚拟环境中的操作,完成实际机 ...

  6. Mybatis学习5标签：if，where，sql，foreach

    包装类:QueryVO.java package pojo; import java.util.ArrayList; import java.util.List; public class Query ...

  7. UI学习网站

    以下是我收集的UI设计的网站提供给大家参考: 站酷 www.zcool.com.cn UI中国 www.ui.cn 学UI网 www.xueui.cn UIGREAT www.uigreat.com ...

  8. 安装 docker管理 工具 页面 portainer

    sudo docker run -d -p 7998:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data ...

  9. JS call和apply方法使用

    总是对call和apply方法使用存在迷惑,特此记录一下 一句话理解这两个方法: call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call ...

  10. Leetcode 题解 Trapping Rain Water

    题目链接:https://leetcode.com/problems/trapping-rain-water/description/ 思路: 1.先找到最左侧第一个高度不为0的柱子i. 2.从i+1 ...