Question

每当url包含div id时，当URL有：

时，它显然会转到div

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

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

但我喜欢的是具有Stackoverflow的相同功能，当您点击邮件中的答案时，它会向下滚动到页面并对答案有fadeOut效果。

我该怎么做？

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而不是加载，但它可能会尝试过早运行您的动画，并且用户将会错过它。

如果您只想使用特定类为div设置动画，则可以在查找中添加过滤器：

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

Answer 2

StackOverflow也使用锚点。您目前正在阅读的帖子是： HTML and jQuery anchoring

这只是<a name="anchorName"></a>
在地址栏：[urlToPage] #anchorName

现在，为了获得淡入淡出效果[在纯粹的JS w / o框架中]

设置div.style.opacity = 0;

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

clearInterval部分不是必需的，因为一旦不透明度超过1，浏览器将不会呈现不同[虽然数字不断添加...]

Answer 3

使用：

event.preventDefault();

例如：

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

HTML和jQuery锚定

3 个答案: