脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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动画滚屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • jQuery正则表达式验证表单代码演示

    jQuery正则表达式验证表单代码演示

    这篇文章主要给大家介绍了关于jQuery正则表达式验证表单的相关资料,我们在写表单的时候会通过一些正则表达式来验证是否正确,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • 原生js实现五子棋游戏

    原生js实现五子棋游戏

    这篇文章主要为大家详细介绍了原生js实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JS组件Bootstrap ContextMenu右键菜单使用方法

    JS组件Bootstrap ContextMenu右键菜单使用方法

    这篇文章主要为大家详细介绍了JS组件Bootstrap ContextMenu右键菜单使用方法，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript学习笔记(三)：JavaScript也有入口Main函数

    JavaScript学习笔记(三)：JavaScript也有入口Main函数

    大家都知道在c和java中，有main函数货main方法作为一个程序的入口函数或方法。在JS中从js源文件的头部开始运行的，我们仍然可以虚构出一个main函数来作为程序的起点，这样一来不仅可以跟其他语言统一了，而且说不定你会对JS有更深的理解。感兴趣的小伙跟着小编一起学习吧
    2015-09-09
  • JavaScript实现动态网页时钟

    JavaScript实现动态网页时钟

    这篇文章主要介绍了JavaScript实现动态网页时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 关于JavaScript 数组你应该知道的事情（推荐）

    关于JavaScript 数组你应该知道的事情（推荐）

    这篇文章主要介绍了JavaScript 数组，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • js大数相加出现精度丢失、运算错误的问题

    js大数相加出现精度丢失、运算错误的问题

    js中数字类型长度达到16位时,进行加减乘除运算,会出现精度丢失,运算结果错误的问题,本文讲述精度丢失的原因及解决办法
    2023-08-08
  • js调用AJAX时Get和post的乱码解决方法

    js调用AJAX时Get和post的乱码解决方法

    在使用"get"时，抓取的页面最后加上编码类型，在使用post时用vbscript解决了编码问题，具体实现如下，有类似情况的朋友可以参考下哈
    2013-06-06
  • uniapp基础篇之上传图片的实战步骤

    uniapp基础篇之上传图片的实战步骤

    应用uni-app开发跨平台App项目时,上传图片、文档等资源功能需求十分常见,下面这篇文章主要给大家介绍了关于uniapp基础篇之上传图片的相关资料,需要的朋友可以参考下
    2022-12-12

最新评论