脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS jquery动画滚屏

JavaScript中通用的jquery动画滚屏实例

 更新时间：2022年07月26日 09:25:18   作者：北京王老师​​​​​​​  
这篇文章主要介绍了JavaScript中通用的jquery动画滚屏实例,本文通过实际代码来详解实现方法,需要的朋友可以参考一下

实现效果

在网站页面上，点击某个超链接，页面跳转到某个位置，跳转过程有一个动画滚动效果，这是一种比较酷的体验。这种效果是如何实现的呢，本文通过实际代码来详解实现方法。

实现代码

网页代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>滚屏效果</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; ">
<div id="header" style="height: 100px;">
<a id="tech" class="scroll-a" href="#hi-tech" rel="external nofollow"  rel="external nofollow" >技术</a>
<a id="code" class="scroll-a" href="#hi-code" rel="external nofollow"  rel="external nofollow" >代码</a>
</div>

<div style="background-color: gray;height: 600px;">
<h1>间隔</h1>
</div>

<div style="background-color: white;height: 600px;" id="hi-tech">
<h1>技术</h1>
<a id="tohead1" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回顶部</a>
</div>

<div style="background-color: gray;height: 600px;" id="hi-code">
<h1>代码</h1>
<a id="tohead" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回顶部</a>
</div>
</body>
<script>
$('#tech').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800);
return false;
});
$('#code').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-code').offset().top}, 800);
return false;
});
$('#tohead').on("click", function () {
$('html,body').animate({scrollTop:$('#header').offset().top}, 800);
return false;
});
$('#tohead1').on("click", function () {
$('html,body').animate({scrollTop:$('#header').offset().top}, 800);
return false;
});
</script>
</html>

这里主要用到了jquery的animate方法，实现思路是，当点击某个超链接时，通过jquery的animate将屏幕滚动到某个位置。注意animate函数的两个参数，一个是滚动位置，一个是动画滚动的时间毫秒。

$('#tech').on("click", function () {
$('html,body').animate({scrollTop:$('#hi-tech').offset().top}, 800);
return false;
});

虽然实现了效果，这里有个问题，如果滚动的超链接较多，那么就要写不少重复代码，还要注意滚动位置不要写错。下面通过改变一下jquery选择器来优化代码。

优化代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>滚屏效果</title>
<script src="./assets/js/jquery.min.js"></script>
</head>
<body style=" margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; ">
<div id="header" style="height: 100px;">
<a id="tech" class="scroll-a" href="#hi-tech" rel="external nofollow"  rel="external nofollow" >技术</a>
<a id="code" class="scroll-a" href="#hi-code" rel="external nofollow"  rel="external nofollow" >代码</a>
</div>

<div style="background-color: gray;height: 600px;">
<h1>间隔</h1>
</div>

<div style="background-color: white;height: 600px;" id="hi-tech">
<h1>技术</h1>
<a id="tohead1" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回顶部</a>
</div>

<div style="background-color: gray;height: 600px;" id="hi-code">
<h1>代码</h1>
<a id="tohead" class="scroll-a" href="#header" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >返回顶部</a>
</div>
</body>
<script>
$('.scroll-a').on("click", function () {
let scrollto = $(this).attr('href');
$('html,body').animate({scrollTop:$(scrollto).offset().top}, 800);
return false;
});
</script>
</html>

可以看出，通过使用jquery class选择器，并使用jquery的this对象获取滚动目标，明显减少了代码，代码看起来更加清楚。

到此这篇关于JavaScript中通用的jquery动画滚屏实例的文章就介绍到这了,更多相关JS jquery动画滚屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript常用工具函数库汇总

    JavaScript常用工具函数库汇总

    业务中比较常用的JavaScript工具函数，可以用在前端环境，也可以用在node服务端，统一整理，方便查阅，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • javascript实现在网页任意处点左键弹出隐藏菜单的方法

    javascript实现在网页任意处点左键弹出隐藏菜单的方法

    这篇文章主要介绍了javascript实现在网页任意处点左键弹出隐藏菜单的方法,设计鼠标事件及css样式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • Ajax中GET与POST请求操作方法梳理介绍

    Ajax中GET与POST请求操作方法梳理介绍

    Ajax全称是Asynchronous Javascript And XML（异步JavaScript和XML），在网页中，利用XMLHttpRequest对象和服务器进行数据交互的方式，这篇文章主要介绍了Ajax中GET与POST请求操作
    2022-11-11
  • Javascript里使用Dom操作Xml

    Javascript里使用Dom操作Xml

    Javascript里使用Dom操作Xml...
    2007-01-01
  • 让浏览器非阻塞加载javascript的几种方法小结

    让浏览器非阻塞加载javascript的几种方法小结

    通常大多数浏览器是并行下载资源的，但由于外部脚本的特殊性例如通过脚本改变文档的DOM结构、脚本之间的存在依赖关系、使用document.write 向页面输出HTML等。
    2011-04-04
  • JavaScript中window.showModalDialog()用法详解

    JavaScript中window.showModalDialog()用法详解

    这篇文章主要介绍了JavaScript中window.showModalDialog()用法详解,需要的朋友可以参考下
    2014-12-12
  • 微信小程序实现日期范围选择

    微信小程序实现日期范围选择

    这篇文章主要为大家详细介绍了微信小程序实现日期范围选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript 常用功能总结

    javascript 常用功能总结

    javascript 常用功能总结，学习js的朋友可以参考下
    2012-03-03
  • TypeScript中的 ! 和 ? 操作符

    TypeScript中的 ! 和 ? 操作符

    在 TypeScript 中,! 和 ? 是两个非常重要且常用的操作符,分别用于非空断言和可选链操作,下面就来具体介绍一下如何使用,具有一定的参考价值,感兴趣的可以了解一下
    2025-02-02
  • 纯javascript判断查询日期是否为有效日期

    纯javascript判断查询日期是否为有效日期

    很多网站都涉及到输入日期选项，如果客户日期输入错误，可能导入查询不到甚至查询到错误的信息，为了更好的满足用户需求，需要对日期进行校验，下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期，需要的朋友可以参考下
    2015-08-08

最新评论