html+css实现滚动到元素位置显示加载动画效果

下面是实现滚动到元素位置显示加载动画效果的完整攻略：

步骤一：HTML结构搭建

需要先在HTML中创建需要滚动到的目标元素，并设置其id属性，用于后续通过javascript获取元素对象。例如：

<div id="target">我是需要滚动到的目标元素</div>

步骤二：CSS样式设置

设置需要展示加载动画的div元素的CSS样式，将其设置为绝对定位，并且设置其在页面中的坐标位置等样式。例如：

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式 */
}

步骤三：Javascript编写

1. 获取目标元素位置

首先需要在javascript中获取目标元素的位置，用于后续判断是否需要显示加载动画。获取位置的一种常用方式是使用offsetTop属性，示例如下：

const targetEl = document.querySelector('#target');
const targetTop = targetEl.offsetTop; //获取元素距离顶部的距离

2. 添加滚动事件监听器

为了监听用户的滚动行为，需要在window对象上添加滚动事件监听器，如下：

window.addEventListener('scroll',function() {
  //滚动事件的监听器函数
});

3. 判断滚动位置是否到达目标元素

当滚动位置（即window.scrollY值）大于或等于目标元素位置（即targetTop值）时，说明滚动位置已经到达目标元素，此时可以显示加载动画。示例如下：

window.addEventListener('scroll',function() {
  if (window.scrollY >= targetTop) {
    //滚动位置已经到达目标元素，显示加载动画
  }
});

4. 显示/隐藏加载动画

当滚动位置到达目标元素时，需要在页面中显示加载动画；当滚动位置离开目标元素时，需要隐藏加载动画。可以通过添加或移除hidden属性来实现。示例如下：

window.addEventListener('scroll',function() {
  if (window.scrollY >= targetTop) {
    //滚动位置已经到达目标元素，显示加载动画
    document.querySelector('#loading').removeAttribute('hidden');
  } else {
    //滚动位置离开目标元素，隐藏加载动画
    document.querySelector('#loading').setAttribute('hidden','hidden');
  }
});

示例说明

以下两个示例演示了如何使用HTML和CSS实现加载动画效果：

示例一：旋转动画

该示例使用CSS的旋转动画效果来实现加载动画。HTML结构如下：

<div id="target" style="height: 2000px"></div>

<div id="loading" hidden>
  <div class="circle"></div>
  <p>Loading...</p>
</div>

CSS样式如下：

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle {
  border: 10px solid #ccc;
  border-top: 10px solid #0076ff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Javascript代码如下：

const targetEl = document.querySelector('#target');
const targetTop = targetEl.offsetTop;

window.addEventListener('scroll',function() {
  if (window.scrollY >= targetTop) {
    document.querySelector('#loading').removeAttribute('hidden');
  } else {
    document.querySelector('#loading').setAttribute('hidden','hidden');
  }
});

示例二：渐变透明度动画

该示例使用CSS的渐变透明度动画来实现加载动画。HTML结构与示例一相同，CSS样式如下：

#loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loading p {
  animation: fade 2s infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

Javascript代码与示例一相同。

这两个示例应该能够帮助你完成“html+css实现滚动到元素位置显示加载动画效果”的任务，如果还有问题或不清楚也可以再提问。