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. 分享：宽恕的艺术 Forgive

    宽恕的艺术 To forgive may be divine, but no one ever said it was easy. 宽恕是神圣的,但是没有人说很容易做到宽恕别人. When someo ...

  2. mysql 字符集研究

    一.创建一个测试数据库 及一个测试用的表.均使用默认的编码方式. show variables like 'char%': mysql> show variables like 'char%'; ...

  3. SQL Server 常用分页SQL(转)

    发现网上好多都是错的.网上经常查到的那个Top Not in 或者Max 大部分都不实用,很多都忽略了Order和性能问题.为此上网查了查,顺带把2000和2012版本的也补上了. 先说说网上常见SQ ...

  4. Linux内核中namespace之PID namespace

    前面看了LInux PCI设备初始化,看得有点晕,就转手整理下之前写的笔记,同时休息一下!!~(@^_^@)~ 这片文章是之前写的,其中参考了某些大牛们的博客!! PID框架的设计 一个框架的设计会考 ...

  5. shell_03

    函数: fanction print_welcome(){ echo welcome now time is `date` } print_welcome 函数调用 print _welcome 00 ...

  6. zabbix使用之常用功能使用心得

    ZABBIX 使用 Written by: Jane.Hoo 1.zabbix监控概念介绍 项目(iterm)定义收集被监控的数据项,如收集被监控机内存使用情况 应用集(application)一些项 ...

  7. js-jquery-002-条形码-一维码

    一.使用 官方地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html 1.js引用 <script type="te ...

  8. flatpickr功能强大的日期时间选择器插件

    flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

  9. 【开发者笔记】冒泡排序过程呈现之java内置GUI表示

    自己玩玩写写,排序的过程多么有趣,特别是把看着电脑吧一堆乱七八糟的数据排成有序组合的时候,看起来贼舒服,特别是强迫症患者.好了,话不多说上代码,也算是自己记录一下吧,没有什么技术含量但个人感觉比较有趣 ...

  10. 从原型链看DOM－－Element类型

    Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...