在html中设置

功能

首先看一下这个插件的大致功能:

  1. 当网页向下移动时,按钮在固定位置出现。

  2. 点击按钮,网页返回顶部。

  3. 返回顶部后,按钮消失。

需要考虑的问题

按钮的定位

按钮定位需要考虑如下几个问题:

  1. 当浏览器宽度大于页面内容宽度时,如何处理。

  2. 当浏览器宽度小于页面内容宽度时,如何处理。

  3. 当浏览过程中,调整了窗口宽度时,如何处理。

如何返回顶部

看到这个问题,很多人第一个想到的就是:

  • <a id="goto-top" href="#">TOP</a>

但是这会有一个小BUG:当网页在head中指定了base时:

  • <head>

  • <base href="http://830725.com" />

  • </head>

此时,点击链接就会跳转到base所指页面的顶部,即http://830725.com/#,而不是当前页面的顶部。
所以我们这里采用windowscrollTo函数返回顶部,同时还加了个小小的动态效果:每次向上滚动100个像素,直到到顶。

  • var h = document.body.scrollTop + document.documentElement.scrollTop;

  • var t = window.setInterval(function()

  • {

  •  window.scrollTo(0,h -= 100);

  •  if(h <= 0)

  •  { window.clearInterval(t);  }

  • }, 5);

  • }, false);

实现代码

为了简单起见,我们所有的代码都放到了JS中,而不是传统的方式:在html中放个标签,在CSS控制标签的外观,然后又在JS中控制标签的行为,为了这么个小功能,要兼顾三个地方,太让人蛋疼了:)

  1. /**

  2. * 在页面上产生个gotop按钮。

  3. * 用纯粹的JS实现,无须额外的CSS和HTML支持。

  4. *

  5. * @param int width 网页的主体宽度,以下三种取值

  6. * – 0 按钮靠浏览器左

  7. * – -1 按钮靠流利器右

  8. * – 其它正数 按钮靠网页内容右侧

  9. * @return void

  10. */

  11. function gotoTop(width)

  12. {

  13.  document.write('<a id="goto-top">^</a>');

  14.  var gotop = document.querySelector('#goto-top');

  15.  /* 默认情况下CSS属性的设置 */

  16.  gotop.style.visibility='hidden';

  17.  gotop.style.cursor='pointer';

  18.  gotop.style.position = 'fixed';

  19.  gotop.style.fontSize='2.5em';

  20.  gotop.style.fontWeight='900';

  21.  gotop.style.textAlign='center';

  22.  gotop.style.background = 'gray';

  23.  gotop.style.borderRadius = '0.2em';

  24.  gotop.style.width='1.4em';

  25.  gotop.style.height='1em';

  26.  gotop.style.top = (document.documentElement.clientHeight / 2) + 100 + 'px';

  27.  gotop.style.opacity='0.3';

  28.  gotop.style.visibility = (document.body.scrollTop +document.documentElement.scrollTop > 10) ? 'visible' : 'hidden';

  29.  if(0 == width)

  30.  { gotop.style.left = '0em';  }

  31.  else if(-1 == width)

  32.  { gotop.style.right = '0em';  }

  33.  else

  34.  {

  35.  var resize = function()

  36.  {

  37.  var left = (document.documentElement.clientWidth – width) / 2 + width + 10;

  38.  if((left – gotop.clientWidth) < width)

  39.  {

  40.  gotop.style.right='0em';

  41.  gotop.style.left = null;  // 设定了right属性,则需要取消left属性。

  42.  }

  43.  else

  44.  {

  45.  gotop.style.left = left + 'px';

  46.  gotop.style.right = null;

  47.  }

  48.  };

  49.  resize();

  50.  window.addEventListener('resize', function()

  51.  {

  52.  resize();

  53.  }, false);

  54.  }

  55.  gotop.addEventListener('mouseover', function()

  56.  {

  57.  this.style.opacity='0.8';

  58.  this.style.textDecoration='none';

  59.  }, false);

  60.  gotop.addEventListener('mouseout', function()

  61.  {

  62.  this.style.opacity='0.3';

  63.  }, false);

  64.  gotop.addEventListener('click', function()

  65.  {

  66.  // IE9和opera下body.scrollTop为0,chrome下documentElement.scrollTop为0

  67.  // 两者始终有一个为0

  68.  var h = document.body.scrollTop + document.documentElement.scrollTop; // 当前位置

  69.  var t = window.setInterval(function()

  70.  {

  71.  window.scrollTo(0,h -= 100); // 每次上移100像素

  72.  if(h <= 0)

  73.  { window.clearInterval(t);  }

  74.  }, 5);

  75.  }, false);

  76.  /* 通过window.onscroll事件确定按钮是否需要显示 */

  77.  window.addEventListener('scroll', function()

  78.  {

  79.  var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;

  80.  gotop.style.visibility = scrollTop > 10 ? 'visible':'hidden';

  81.  }, false);

  82. };

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注


*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>