HTML 和 jQuery 锚定

Question

每当 url 包含 div id 时，当 URL 具有以下内容时，它显然会转到 div：

http://domain.com.faq.php#1

<div id="1">Bla bla bla</div>

但我喜欢的是与 Stackoverflow 相同的功能是，当您单击消息中的答案时，它将向下滚动到页面并对答案具有淡出效果。

我该怎么做？

Answer 1

据我所知，到有效锚点目标的动画不能在页面加载时进行动画处理，因为浏览器默认将用户向下滚动页面到锚点。对于页内链接，您可以劫持锚链接并设置动画。

但是，在像 SO 这样的新页面加载时，您会注意到页面不会向下动画，而只是向下滚动，尽管该框确实会动画颜色。这就是您在 jQuery 中可以做到的方法。如果您想为背景设置动画，请务必包含 color 插件-颜色。

<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
   $(window).load(function(){
        var hash = window.location.hash;
        if(hash){
          $(hash).css('backgroundColor', '#AA0000')
                 .animate({backgroundColor: '#FFFFFF'}, 200);
        }
   });
</script>   

您可以使用 DOMReady 代替 load，但它可能会过早尝试运行动画，而用户会错过它。

如果您只想使用特定类对 div 进行动画处理，则可以在查找中添加过滤器：

$(hash).filter('.my_div').css ...

Answer 2

用途：

event.preventDefault(); 

例如：

$('li.share a').click(function(ev) {
        ev.preventDefault();
        var link = ev.target.href;
        var id = link.substring(link.indexOf("#") + 1);
        $('#' + id).fadeOut();
    });

Answer 3

StackOverflow 也使用锚点。您当前正在阅读的帖子是：
HTML 和 jQuery 锚定

这只是

---

现在，要获得淡入淡出效果[在没有框架的纯 JS 中]

设置 div.style.opacity = 0;

var intervalId = setInterval( function(){
  if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);

clearInterval 部分不是必需的，因为一旦不透明度超过 1，浏览器将不会以不同的方式呈现[尽管数字不断增加...]