Javascript HTML和jQuery锚定

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

Bla-Bla-Bla

但我喜欢的是Stackoverflow的相同功能，当你点击消息中的答案时，它会向下滚动到页面，并对答案产生淡出效果

---

如何做到这一点？

StackOverflow也使用锚定。您当前阅读的帖子是：

它只是

在地址栏：[urlToPage]#anchorName

---

现在，要获得淡入淡出的效果[在纯JSW/o框架中]

将div.style.opacity设置为0

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

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

使用：

event.preventDefault(); 

例如：

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

---

据我所知，在页面加载时无法为有效锚定目标设置动画，因为浏览器默认情况下会将用户沿页面向下滚动到锚定目标。对于页内链接，可以劫持锚链接并设置动画

但是，在像这样加载新页面时，您会注意到页面没有向下设置动画，只是向下滚动，尽管框确实设置了颜色动画。这就是在jQuery中实现的方法。如果要设置背景颜色的动画，请确保包含插件

<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>   

---

我想你已经错过了他的问题的核心部分：效果。嘿，

链接应该是
href
在你的
标签中，而对jQuery特定的问题给出一个纯JS的答案会让这个答案很糟糕-1@DougNeiner，他没有只指定JQuery，他只是用JQuery和JavaScript标记它。我看到很多问题都带有JQuery、Mootools等标签，但这并不意味着答案必须使用这些框架。至于link，我指的是name，用来定义一个锚定点。我意识到有时候确实如此，但问题的标题是“HTML和jQuery锚定”，带有jQuery标记。。。不知道，我想我把“更好”理解为“纯JS”，对于使用jQuery的人来说，jQuery已经可以正常化浏览器差异，在jQuery中给出答案似乎更好。既然
a
部分是正确的，我删除了-1。如果我想得太多，很抱歉。我不太了解jQuery的效果，无法真正回答这个问题，但基本上，可以使用来对页面加载进行一些处理，并在处理程序中，阅读
window.location.hash
，找出要突出显示的元素（如果有），然后执行所需的效果。您可能实际上不想淡入（因为元素已经显示）；例如，在不同的背景中淡出。
fadeOut
将使答案消失，这似乎是…非最优的。当然，但这正是他要求的；-）你说得对。我更喜欢
$（'#'+id）.toggle（）或
$（'#'+id）.slideToggle（）。
<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>   

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