jQuery实现锚点向下平滑滚动特效示例


Posted in jQuery onAugust 29, 2017

实现效果:

jQuery实现锚点向下平滑滚动特效示例

实现原理:

使用jQuery animate()方法实现页面平滑滚动特效

$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});

简单实例代码:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 // Add smooth scrolling to all links
 $("a").on('click', function(event) {
 
  // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {
   // Prevent default anchor click behavior
   event.preventDefault();
 
   // Store hash
   var hash = this.hash;
 
   // Using jQuery's animate() method to add smooth page scroll
   // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
   $('html, body').animate({
    scrollTop: $(hash).offset().top
   }, 800, function(){
  
    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
   });
  } // End if
 });
});
</script>
 <style>
body, html, .main {
  height: 100%;
}
 
section {
  min-height: 100%;
}
</style>
</head>
<body>
<a href="#section2" rel="external nofollow" style="
   font-size: 30px;
   font-weight: bold;
   text-align: center;
">点击此处平滑滚动到第二部分</a>
<div class="main">
 <section></section>
</div>
<div class="main" id="section2">
 <section style="
   background-color: #03c03c;
   color: #fff;
   font-size: 30px;
   text-align: center">
   SECTION 2
 </section>
</div>
</body>
</html>

以上这篇jQuery实现锚点向下平滑滚动特效示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
You might like
摩卡咖啡
2021/03/03 咖啡文化
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
Smarty保留变量用法分析
2016/05/23 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
Javascript var变量隐式声明方法
2009/10/19 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Django框架表单操作实例分析
2019/11/04 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
什么是python类属性
2020/06/10 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
公司行政主管岗位职责
2015/04/09 职场文书
导游词之杭州西湖
2019/09/19 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
React forwardRef的使用方法及注意点
2021/06/13 Javascript
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
SpringRetry重试框架的具体使用
2021/07/25 Java/Android