【前端】jQuery实现锚点向下平滑滚动特效
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实现锚点向下平滑滚动特效的更多相关文章
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- jQuery之锚点带动画跳转特效
背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- 前端小插件之手写js循环滚动特效
很多前端都离不开滚动的特效,调用插件繁琐,后期更改麻烦,考虑到这些因素,自己写了一套无限循环滚动的小特效. 首先滚动特效很好写,用css就可以完成,下面写一个基础css向上循环滚动特效 html &l ...
- 前端JQuery中获取一个div下的多个id值
获取所有的Id值,方法是通过div.class获取全局的值,然后再提取具体的Id值 方法一:用for循环,因为$("div.class")获取的是一个数组,通过循环读取出数组中的每 ...
- 仿微信未读RecyclerView平滑滚动定位效果
效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果 用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...
- jquery 监听所有锚点链接实现平滑移动
jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...
- 使用jquery animate实现锚点慢慢平滑滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
随机推荐
- java面向对象、构造方法 之内部类
UML类图 UML Unified Modeling Language (UML)又称统一建模语言或标准建模语言 在一个类中 属性表示这类事物的性质(描述它的数据) 方法表示这类 ...
- mysql数据库默认编码配置
修改my.ini文件 以下添加[mysql] default-character-set=utf8[mysqld] character_set_server = utf8init_connect='S ...
- java 多线程 day09 线程池
import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.c ...
- jenkins slave启动报错:hudson.util.IOException2: Slave JVM has terminated. Exit code=126
添加mac slave节点报错如下:Expanded the channel window size to 4MB [11/07/14 19:11:54] [SSH] Starting slave p ...
- mysql数据库从删库到跑路之mysql数据类型
一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...
- flam3 ubuntu 依赖文件
http://packages.ubuntu.com/zh-cn/source/precise/flam3 » Ubuntu » 软件包 » precise (12.04LTS) » 源代码 » x1 ...
- delphi webbrowser 跨域访问
procedure IterateFrames(const AWB: IWebBrowser2);var Doc: IHTMLDocument2; Container: IOleContainer; ...
- PHPCMS 修改后台路径简便方法
之前在网上找了很多关于修改phpcms后台路径的修改方法,但是都太繁琐(个人感觉),终于找到了一个相对简单的修改方法,在这里和大家分享一下,希望互相学习. 第一步:在网站根目录创建一个文件夹,以后就要 ...
- Tomcat内部结构及请求原理(转)
Tomcat Tomcat是一个JSP/Servlet容器.其作为Servlet容器,有三种工作模式:独立的Servlet容器.进程内的Servlet容器和进程外的Servlet容器. Tomcat的 ...
- Gym - 100548H The Problem to Make You Happy 2014-2015 ACM-ICPC, Asia Xian Regional Contest (BFS+博弈)
题意:Bob和Alice在一张有向无环图上移动,给定二者的起点,Bob先手.Bob的失败条件是不能移动或者与Alice相遇.两个人都采取最优策略,求Bob是否会赢 分析:银牌题.先确定所有的失败状态, ...