为何锚点中JavaScript URL内的样式属性修改会改变文档主体内容？

当你使用javascript:伪协议作为<a>标签的href属性值时，浏览器会执行其中的代码，并且将代码的返回值作为新的页面内容渲染。这里document.body.style.overflow='hidden'是赋值语句，赋值语句的返回值就是被赋予的'hidden'字符串，所以浏览器会把这个字符串当成页面内容显示，就出现了只显示"hidden"的空白页。

而把代码放在onclick事件里时，事件处理函数的返回值不会被浏览器当作页面内容处理，只是执行代码逻辑，因此能正常隐藏滚动条，不会替换原有页面内容。

解决方法 #

• 方法一：在javascript:代码末尾添加void 0，让代码返回undefined，浏览器就不会渲染返回值：

  <a href="javascript:document.body.style.overflow='hidden';void 0">hide scrollbar</a>
  

• 方法二：使用onclick事件配合href="#"，同时阻止默认跳转行为避免锚点跳转：

  <a href="#" onclick="document.body.style.overflow='hidden';return false">hide scrollbar</a>
  

• 方法三：推荐使用分离HTML与JS的现代事件绑定方式：

  <a href="#" id="hideScrollbarBtn">hide scrollbar</a>
  <script>
    document.getElementById('hideScrollbarBtn').addEventListener('click', function(e) {
      e.preventDefault();
      document.body.style.overflow = 'hidden';
    });
  </script>
  

内容的提问来源于stack exchange，提问作者qwazix