坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 网页点击平滑滚动效果~

网页点击平滑滚动效果~

坚果大叔
2024-10-17 16:43:08技术阅读 2,033

不管在移动端或者 PC 端,当段落内容过长的时候我们都期望有快捷方式能够快速定位到某一段落,省去鼠标滚动的繁琐。

思路

这种效果实现的方式因人而异有多种方式,不管是 Js实现还是 Css 实现无非是看开发者的个人习惯。并没有任何你强他弱的区分,功能实现丝滑、代码易维护就好。

下面是移动端菜单点击滚动到当前菜单和 PC 端定位到当前段落的实现方式。

在移动端有时候有这些的设计效果,比如商品的分类很多,但是设计设计的时候只有一行,左右滚动,那么这时候你点击后面的时候希望在点击的时候自动将点击的菜单移动到视图的中央区域,这样后面被遮挡的菜单可以跟随往前移动。

当然你也可以手动滑动。另外还有个就是从前一个页面带参数进来的时候也可以自动滚动到当前菜单的位置。

HTML代码

     <div class="listMenuCont" ref="listMenuCont">
        <div
          class="listMenu"
          ref="listMenu"
          :style="{ width: (225 * mobileMenuData.length) / 100 + 'rem' }"
        >
          <div
            class="listMenuItem"
            :data-id="list.id"
            :class="mobileCurrentId == list.id && 'listMenuCurrent'"
            v-for="list in mobileMenuData"
            @click="mobileMenuClick(list.id)"
          >
            <span>{{ list.name }}特产</span>
          </div>
        </div>
      </div>

菜单容器的宽度是当前元素的个数 * 固定宽度。

JS代码

mobileMenuClick(id) {
  const clickedItem = this.$refs.listMenu.querySelector(
    `.listMenuItem[data-id="${id}"]`
  );
  if (clickedItem) {
    const container = this.$refs.listMenuCont;
    const containerWidth = container.clientWidth;
    const itemWidth = clickedItem.offsetWidth;
    const itemOffsetLeft = clickedItem.offsetLeft;
    const scrollLeft = itemOffsetLeft - containerWidth / 2 + itemWidth / 2;
    container.scrollTo({
      left: scrollLeft,
      behavior: "smooth",
    });
  }
}

PC 端在商品详情的时候可能有多个 Tab,但是他不是切换隐藏,而是在同一个页面。这时候点击 tab的时候就希望能够自动定位到当前 tab的位置。

当然如果往下滚动的时候内容过长,我们还希望 tab 能够悬浮在浏览器顶端方便我们点击。

HTML代码

当点击changeIntroduceMenu的时候根据配置的 id 自动线性滑动到对应 id的内容位置。

        <div class="webShopIntroduce">
          <div class="webShopIntroduceMenu flex">
            <div
              class="introduceMenu"
              :class="introduceMenuCurrent == list.id && 'introduceMenuCurrent'"
              @click="changeIntroduceMenu(list)"
              v-for="list in introduceMenuData">
              <span>{{ list.name }}</span>
            </div>
          </div>
          <div class="content">
            <div class="imageText" id="imageText">
              <div class="title">图文介绍</div>
            </div>
            <div class="video" id="video">
              <div class="title">宣传视频</div>
            </div>
            <div class="contactUs" id="contactUs">
              <div class="title">联系方式</div>
            </div>
          </div>
        </div>

Js代码

changeIntroduceMenu(list) {
    const element = document.getElementById(list.id);
    if (element) {
       element.scrollIntoView({ behavior: 'smooth' });
    }
}

最终效果

网页点击平滑滚动效果~-坚果大叔

网页点击平滑滚动效果~-坚果大叔

赞赏 赞(4)
国庆假期的一些照片~
上一篇
我的脚是扭伤了?还是痛风发作了?
下一篇
在小程序中查看

评论已关闭

搜你想看的
聚合文章
Vue 添加滚动监听
重学js之JavaScript 面向对象的程序设计(创建对象)
Node.js REPL
嗖嗖嗖
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,994 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,329 5 2
Ant-design-vue Table 自定义列斑马纹效果
2024-09-26 11:26:50
2,784 1
4
  • 4
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢