js原生页面点击导航滚动动画

原创已于 2023-07-19 14:35:53 修改 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-07-19 14:35:36 首次发布

该文章介绍了如何利用JavaScript的原生方法scrollIntoView，结合CSS选择器选取页面上的特定元素（如科室H1标题），并通过设置行为和位置参数，实现在用户点击导航时平滑滚动到对应科室的位置，提供良好的交互体验。

主要用到原生的scrollIntoView方法

// 点击导航获取右侧科室（大的科室H1标题）
let allH1 = document.querySelectorAll(".cur");
// 滚动到对应科室的位置
allH1[对应的索引值].scrollIntoView({
    behavior:"smooth",// 过渡动画效果 详细看文档
    block:"start" // 滚动到的位置 可选start center end
})

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱼尾uuui

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

实现网页滚动动画效果：使用滚屏动画为网页增添动感

HsvvDatabase的博客

09-19

773

在现代网页设计中，滚动动画是一种常见的技术，可以为网页增添动感和交互效果。通过使用CSS和JavaScript，我们可以实现各种各样的滚屏动画效果，例如淡入淡出、平滑滚动、旋转等。本文将详细介绍如何实现一个简单的滚屏动画效果，并提供相应的源代码示例。现在，当用户滚动网页时，滚动动画将在滚动项进入可视区域时触发，使其淡入显示。首先，我们需要创建一个基本的HTML结构，包含滚动动画效果所需的元素。接下来，我们需要使用CSS来定义滚动动画的样式。在上述示例中，我们使用了一个包含多个滚动项的容器。

js原生滚动条动画

123的博客

11-27

9540

说起滚动条动画，之前一直用的jQuery，今天比较闲，用js手写了一个，比jQ的好用哈，jQ是匀速滑动，我这个有减速效果！ 1.调用scroll_to，传入指定位置的高度参数就可以用了！ 2.减速的效果是用步长实现的，即每次滚动都是剩余距离的1/40，所以越滚越快！学到的几个js获取位置方法： 1.当前页滚动高度： document.body.scrollTop 2.元素距离文档...

参与评论您还未登录，请先登录后发表或查看评论

原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）

bugQueen的博客

12-03

5679

效果图：点击导航栏左右拖动代码： CSS： <style> .navBar { width: 1200px; margin-left: 25px; margin-top: 40px; margin-bottom: 40px; overflow-x: auto; white-space: nowrap; }

超级炫酷的效果js实现动画导航菜单

02-15

/找到除空格外所有的子对象 function getChilds (obj) { var childs=obj.childNodes; var arr=[]; for (var i=0; i<childs.length; i++) { //if(childs[i].nodeType==3 && /^\s+$/.test(childs[i].nodeValue)){ if(childs[i].nodeType==3){ continue; }else{ arr.push(childs[i]) } } return arr; } //通过类名获取对象 function getClass (classname,obj) { var obj=obj||document; var arr=[]; if(document.getElementsByClassName){ return obj.getElementsByClassName(classname) }else{ var alls=obj.getElementsByTagName("*"); for (var i=0; i<alls.length; i++) { if(alls[i].className==classname){ arr.push(alls[i]) } } } return arr; } // function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { // return !!(parentNode.compareDocumentPosition(childNode) & 16); return (parentNode.compareDocumentPosition(childNode) ===20); } } function checkHover(e,target){ if (getEvent(e).type=="mouseover") { return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target); } else { return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target); } } function getEvent(e){ return e||window.event; }

JS之简单导航栏动画

蓝莓味的鱼

09-23

1009

实现思路：通过js动态添加css和删除css以及设置过渡时间 1:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机</title> <lin

导航栏滚动渐变效果 html+css+js

m0_67392273的博客

03-06

1546

先看效果：实现： 1.定义导航栏的文字标签： <div class="tou"> <sapn class="logo"> 北极光。</sapn> <ul class="biao"> <li><a href="#"><a href="#">主页</a></li> <li><a href="#">个人简介</

基于animate.css和原生JS实现的鼠标滚动动画效果.zip

07-11

实现效果：基于animate.css和原生JS实现的鼠标滚动动画效果，挺不错的CSS3动画效果，基于CSS动画插件 animate.css实现，animate.css拥有众多的动画特效而且是开源的，大家到官网看看吧。

jQuery页面上下滚动触发区块动画特效

06-10

- `js`：这个文件夹可能包含jQuery脚本，实现了页面滚动监听和动画控制逻辑。 - `dist`：通常用于存放编译后的、用于部署的文件，可能包含了压缩和优化过的CSS和JS文件。 ### 7. 实现步骤 1. 在`index.html`中引入...

简单原生js文字向上滚动消息框代码

06-11

这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式，它不依赖于任何JavaScript库如jQuery，而是完全基于原生JavaScript编写，这使得它在性能和加载速度上具有优势。首先，`index.html`是网页的主文件，它...

原生JS竖直导航菜单点击导航标签依次展开收缩代码.rar

最新发布

11-23

原生JS竖直导航菜单点击导航标签依次展开收缩代码是一种基于纯JavaScript，不依赖于任何外部库或框架，实现的网页竖直导航菜单功能。在现代网页设计中，导航菜单是用户与网站进行交互的重要组成部分，它不仅需要具备...

原生js实现导航条动画

逍遥的码农的博客

05-13

452

原生js实现毛毛虫导航直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> * { margin

js+css制作导航栏下划线跟随动画，App+H5点击效果

qq1219579255的博客

03-15

4433

这是使用Vue制作的一个下划线跟随效果，没有使用其他插件

点击导航滚动到指定位置 (滑动到指定位置对应导航自动选中)Vue3+js

zhu_menglu的博客

12-22

3124

注：部分组件使用的naive-Ui。

滚动动画（跑马灯动画）的几种实现方式

qq_40289557的博客

08-10

5774

在大屏可视化应用中，滚动动效（跑马灯效果）也是常见的一种数据展现方式，本章节针对字幕滚动和列表滚动效果做一个小小的总结，结合vue框架，从原生标签、css动画、javascript三个维度简单阐述以下文字及列表滚动动效的实现方案。...

js实现页面滚动到指定位置触发动画

Polaris_tl的博客

05-08

1万+

js实现当页面元素出现在屏幕中时，触发动画

使用scrollTo/scrollTop让页面元素滚动到指定位置, 并设置滚动动画

灰色头像@的博客

03-07

6407

当容器有滚动条时,有时需要点击或将页面滚动到指定元素位置比如父元素设置了 ,当元素里的内容超过元素本身的高度时, 就会出现滚动条, 那么鼠标滑动的距离就是其滚动距离. 如何设置滚动 scrollTop属性就是指 “元素中的内容” 超出 “元素上边界” 的那部分的高度。直接给父元素的scrollTop赋值: 这种方法比较直接, 但是因为是直接设置的dom元素的js属性而不是css属性, 所以想通过这种方法设置过渡动画是没有效果的(transition: all 1s linear; 无效)补充: 有

原生JavaScript动画实现指南

weixin_35811662的博客

09-02

2120

本文还有配套的精品资源，点击获取简介：JavaScript作为Web开发的重要组成部分，尤其在前端开发中扮演着关键角色。本教程深入探索JavaScript的核心概念，专注讲解原生JavaScript如何应用于创建动画效果，并介绍DOM与BOM的基础知识。内容涵盖JavaScript基础、DOM操作、BOM接口、原生动画的实现技术、事件处理以及异步编程，旨在帮助开发者打造功...

js实现平滑滚动到指定位置

weixin_46413834的博客

03-10

1万+

方案一 : 基于js实现平滑滚动的效果 // 实现滚动条平滑滚动的方法 scrollToCmtList() { // 1.1 返回文档在垂直方向已滚动的像素值 const now = window.scrollY // 1.2 目标位置（文章信息区域的高度） let dist = document.querySelector('.article-container').offsetHeight // 1.3 可滚动高度 = 整

原生JS实现滚动条动画（滚动到指定位置 / 返回顶部）