原生JS 回到顶部、tab栏的切换

回到顶部：html里改变的头部还有 回到顶部按钮

 <div id="top" class="header" data-reactid=".0.0"></div>

  <div class="to-top" id="totop"></div>

js代码：
 

function my$(id) {
  return document.getElementById(id);
}

// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  return {
    scrollLeft: scrollLeft,
    scrollTop: scrollTop
  }
}

// 获取元素
// 注意：不能用top。top 是window自带的一个属性，此属性是只读的。此属性默认是window对象
var bodyTop = my$('top');

// 回到顶部的按钮
var totop = my$('totop');

// 当拖动滚动条的时候执行
window.onscroll = function () {
  //1 当拖动滚动条的时候，当内容滚动出去 10px的时候，改变top的高度，并且显示回到顶部按钮
  // 调用common.js getScroll函数，获取页面滚动出去的距离
  var scrollTop = getScroll().scrollTop;
  if (scrollTop > 10) {
    // 改变top 样式 
    bodyTop.className = 'header fixed';
    // 显示回到顶部
    totop.style.display = 'block';
  } else {
    // 改变top 样式
    bodyTop.className = 'header';
    // 显示回到顶部
    totop.style.display = 'none';
  }
}

//2 当点击回到顶部按钮的时候，动画的方式，回到最上面，让滚动距离为0
var timerId = null;
totop.onclick = function () {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }

  timerId = setInterval(function () {
    // 步进 每次移动的距离
    var step = 10;
    // 目标位置
    var target = 0;

    // 获取当前位置
    var current = getScroll().scrollTop;

    if (current > target) {
      step = -Math.abs(step);
    }

	// documentElement  网页中的根元素 html
    // 判断当前是否到达目标位置
    if (Math.abs(current - target) <= Math.abs(step)) {
      clearInterval(timerId);
      document.body.scrollTop = target;
      document.documentElement.scrollTop = target;
      return;
    }

    current += step;
    document.body.scrollTop = current;
    document.documentElement.scrollTop = current;
  }, 5);
}

 

tab栏的切换：

			<div class="news">
				<div id="newsT" class="news-t">
					<a href="#" class="cuxiao">促销</a>
					<a href="#" class="gg">公告</a>
					<a href="#" class="more">更多</a>
					<div id="flag"></div>
				</div>
				<!-- 详细内容 -->
				<div id="newsContainer">
					<div class="news-b">
						<ul>
							<li><a href="#">挑战3天不洗头</a></li>
							<li><a href="#">挑战3天不洗头</a></li>
							<li><a href="#">益生菌领券满399减100</a></li>
							<li><a href="#">益生菌领券满399减100</a></li>
						</ul>
					</div>
					<div class="news-b hide">
						<ul>
							<li><a href="#">从今天起放假3天</a></li>
							<li><a href="#">全部商品5折</a></li>
						</ul>
					</div>
				</div>
			</div>

 

// 获取元素，整体的tab栏
var newsT = document.getElementById('newsT');
// 红色的线
var flag = document.getElementById('flag');
// 详细内容的容器
var newsContainer = document.getElementById('newsContainer');
//1 获取到a标签，注册事件
for (var i = 0; i < 2; i++) {
  var link = newsT.children[i];
  link.onmouseover = linkMouseover;
  // 设置a标签的自定义属性，记录索引
  link.setAttribute('index', i);
}

function linkMouseover() {
  //2 当触发a标签的mouseover，让红色的线执行动画，显示对应的详细内容
  // 让红色的线执行动画
  // 获取当前触发事件的a标签的位置
  var offsetLeft = this.offsetLeft;
  animate(flag, offsetLeft - 3, 30);

  // 显示对应的详细内容
  // 让所有的详细内容隐藏
  for (var i = 0, len = newsContainer.children.length; i < len; i++) {
    var div = newsContainer.children[i];
    // 判断类样式中是否已经有hide
    if (div.className.indexOf('hide') === -1) {
      div.className = 'news-b hide';
    }
  }
  // 当前对应的详细内容显示
  var index = parseInt(this.getAttribute('index'));
  newsContainer.children[index].className = 'news-b show';
}