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" 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实现锚点向下平滑滚动特效的更多相关文章

  1. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

  2. jQuery之锚点带动画跳转特效

    背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  4. 前端小插件之手写js循环滚动特效

    很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...

  5. 前端JQuery中获取一个div下的多个id值

    获取所有的Id值,方法是通过div.class获取全局的值,然后再提取具体的Id值 方法一:用for循环,因为$("div.class")获取的是一个数组,通过循环读取出数组中的每 ...

  6. 仿微信未读RecyclerView平滑滚动定位效果

    效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...

  7. jquery 监听所有锚点链接实现平滑移动

    jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...

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

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

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

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

随机推荐

  1. 160421、MyBatis批量插入数据

    在程序中封装了一个List集合对象,然后需要把该集合中的实体插入到数据库中,由于项目使用了Spring+MyBatis的配置,所以打算使用MyBatis批量插入,由于之前没用过批量插入,在网上找了一些 ...

  2. 160329(二)、web.xml配置详解

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  3. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  4. Spring---Bean使用外部属性文件

    在配置文件里配置 Bean 时, 有时需要在 Bean 的配置里混入系统部署的细节信息(例如: 文件路径, 数据源配置信息等). 而这些部署细节实际上需要和 Bean 配置相分离 Spring 提供了 ...

  5. hibernate中持久化对象的状态

    持久化对象有以下几种状态: 临时对象(Transient): 在使用代理主键的情况下,  OID 通常为 null  不处于 Session 的缓存中 在数据库中没有对应的记录 持久化对象(也叫”托管 ...

  6. C语言实现双链表(带头节点)

    双链表和单链表性质相似只是在多加了一个前指针 1.定义结构体 typedef struct Node{ int data; struct Node *prior; struct Node *next; ...

  7. SQL Server中执行Sql字符串，返回执行结果

    今天遇到一个问题:想把sql字符串在SQL Server 中执行了,并获取执行的结果 ); SET @tablename='select @table3 = count(1) from UserVis ...

  8. oracle导入导出 dmp文件

    oracle导入导出 dmp文件: 打开cmd窗口,在cmd窗口下,按照个人需要输入以下对应的命令: 1.imp 用户名/密码@网络服务名 file=XXX.dmp fromuser=XXX tous ...

  9. APACHE优化参数

    1.CentOS5.8 x86_64位 采用最小化安装,系统经过了基本优化篇2.apache版本:httpd-2.2.293.源码包存放位置:/home/oldboy/tools4.源码包编译安装位置 ...

  10. SQLALchemy的其他常用操作

    使用连接池的两种方式 第一种方式: 直接从SessionFactory里获取,此时如果需要开启多个进程,那么创建连接池的代码一定要放在循环里面 不然的话每个进程都是用一个session了 from s ...