所有分类
  • 所有分类
  • 后端开发
网页设计必备技巧:锚点平滑滚动VS CSS滚动行为,谁更给力?

网页设计必备技巧:锚点平滑滚动VS CSS滚动行为,谁更给力?

而实现平滑滚动效果,可以通过CSS的一些技巧来实现。通过设置该属性为smooth,可以实现页面在滚动时的平滑过渡效果。三、使用transform属性实现平滑滚动除了使用锚点和滚动行为属性,我们还可以使用CSS的transform属性来实现平

网页设计必备技巧:锚点平滑滚动VS CSS滚动行为,谁更给力?

一、使用锚点实现内部页面平滑滚动

想做个好用的网站?页面滑动流畅最重要哦~这时候就需要‘锚点(anchor)’这种神奇工具了。比如你喜欢逛比如淘宝啊京东啊这些平台,它们都是这么做的。就是在HTML里面给每个按钮或图片标记个ID,然后写下这个ID到导航栏里头,用户一点它就能快速跳转过去,滑动也不会卡住!简单又好用,让网页更舒适好看!

让我给你说,用这招儿,咱们可以把导航链接跟相关元素ID关联起来。比如像‘第1部分’这类的链接,记得在那个地方也加上相同的id,怎么挑选随你心意。这样的话,大家点了这些链接后,浏览器就能立刻找到目标位置,感觉就像是瞬间抵达!而且,这种方式比直接跳转更顺手、舒服!赶快试一试

活久见!你晓得吗?用CSS制网页时,把scroll-behavior改成smooth,就像吃了炫迈口香糖一样,滑遍整个画面,给力到飞起!

二、使用CSS的滚动行为属性



  
  
  平滑滚动<a href='https://www.icz.com/technicalinformation/web/2024/04/14945.html' title='示例' target='_blank' rel="noopener">示例</a>
  
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    /* 导航样式 */
    nav {
      background-color: #f5f5f5;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }
    nav ul li {
      margin: 0 10px;
    }
    nav ul li a {
      color: #333;
      text-decoration: none;
      padding: 10px;
    }
    /* 内容样式 */
    #home {
      height: 100vh;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    #about {
      height: 100vh;
      background-color: #eaeaea;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    #contact {
      height: 100vh;
      background-color: #d9d9d9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
  


  
  

欢迎来到首页

这是一个平滑滚动示例

关于我们

这是关于我们的内容

联系我们

这是联系我们的内容

可别老是只用锚点,告诉你个秘密,其实在CSS里,咱们可以靠着scroll-behavior这个属性,让网页滑动得像电视剧那样顺溜~

简单说,只要我们在CSS里给body或html添个”scroll-behavior”属性,带上”smooth”,就能让网页滑动起来更加顺溜了!这样滑动会有一种顺畅的动画效果,舒心多了~

大家注意!虽然 scroll-behavior 这个属性可以让网页滑动更顺溜,但并不是所有的浏览器都支持。所以做项目时,要考虑到兼容性问题,根据实际情况来决定~

三、使用transform属性实现平滑滚动

别急,还有个超好玩的方法忘跟你说了,就是用CSS 3里的那个 transform属性来搞平滑滚动。你晓得,它里面那个 translateY函数就能做到把东西往上或者往下拉!这样看起来就更加时髦、流畅!

<pre class='brush:css;toolbar:false;’>html {
scroll-behavior: smooth;
}

ok,只需在JavaScript里给导航链接加个监听器,就可以测量出点击物品与浏览器顶端的距离,那就是 offsetTop 。搞定之后,我们就能利用 transform:translateY()这个神奇的命令来把整页往上或者往下拖移过去,这样你浏览网页时就不用来回拉动~

虽然编些 JavaScript 有点费劲儿,可是调来调去太好使了。有个神奇的 transform 属性在手,设计炫酷的互动网页就像吃饭喝水那么简单,保证你上网体验瞬间爆棚!

四、总结

这篇文章告诉大家3招超级容易的CSS技巧,能让你的滑动变得顺滑~根本不用锚点!只需要学会如何使用CSS的scroll-behavior或者transform属性就能轻松实现!每个技巧都很实在,随便选吧~

锚点就是帮你瞬间转移网站页面位置的神奇按钮;还有那个叫 scroll-behavior 的家伙,它就像是你手中的操纵杆,让网页浏览起来特别得心应手;至于 transform,那可真是你展现别具一格视觉效果的得力工具

简单点讲,咱们做项目可不就是随机应变吗?还得跟JS代码搭配着用,这样功能才能强大!就凭这招小窍门,咱们成功地做出了既实用又美观,还具有互动性的网站设计来咯~



  
  
  平滑滚动示例
  
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    /* 导航样式 */
    nav {
      background-color: #f5f5f5;
      padding: 20px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    }
    nav ul li {
      margin: 0 10px;
    }
    nav ul li a {
      color: #333;
      text-decoration: none;
      padding: 10px;
    }
    /* 内容样式 */
    .container {
      height: 100vh;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    .section {
      height: 100vh;
      background-color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
  


  
  

欢迎来到首页

这是一个平滑滚动示例

关于我们

这是关于我们的内容

联系我们

这是联系我们的内容

var links = document.querySelectorAll('nav ul li a'); var sections = document.querySelectorAll('.section'); links.forEach(function(link) { link.addEventListener('click', function(e) { e.preventDefault(); var href = this.getAttribute('href'); var offsetTop = document.querySelector(href).offsetTop; scroll({ top: offsetTop, behavior: 'smooth' }); }); });

这篇小文可能会给您提供点火一般的灵感,让您能用CSS轻松制作出酷炫且流畅的网站界面!

原文链接:https://www.icz.com/technicalinformation/web/javascript/2024/04/15053.html,转载请注明出处~~~
0

评论0

请先
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?