jQuery fadeIn制作页面滚动到顶部/跳转

jQuery本周销毁我。我在我的投资组合网站（http://www.codeisdna.com）上通过jQuery使用fadeIn来点击一个部分后打开一个部分。下面是我使用的HTML代码：开辟了一个标签jQuery fadeIn制作页面滚动到顶部/跳转

<div class="project first project_name"> 
    <div class="title"> 
     Project Title! 
     <div class="date">2012</div> 
    </div> 
    <a class="expand" title="Click to expand the project." href="#project_1">Project Title!</a> 
</div>

：

<div id="project_1" class="project_full pname"></div>

使用此JS：

$(document).ready(function(){ 
     $(".project").click(function() { 
      $("a.expand").removeClass("hovered"); 
      $(this).find("a.expand").addClass("hovered"); 
      $(".project_full").hide(); 
      var selected_tab = $(this).find("a").attr("href"); 
      $(selected_tab).fadeIn(); 
      return false; 
     }); 
    });

编辑：这里是CSS代码.project_full（扩展标签 - 为的.project CSS代码是不相关的）：

.project_full { 
    display: none; 
    margin-top: 20px; 
    width: 100%; 
    max-height: 450px; 
    padding: 20px 0px; 
    text-align: center; 
    background: url(../img/code.jpg) top center no-repeat fixed #293134; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5); 
    color: #fff; 
    overflow: hidden;} 
.project_full .wrapper {position: relative;}

我已经试过分配一个固定高度的父DIV，e.PreventDefault（）不工作（我使用锚基于标签，所以没有什么之类的都可以），依此类推。该页面在第一次点击和每次连续点击时跳转。我知道，一旦div被隐藏和“重新隐藏”，它就会因为丢失的内容而跳跃。

我想知道如果HTML5数据属性会解决这个问题？但是再一次，为什么它仍然存在，虽然它是空白的（＃）。

希望有人带了很多JS的经验可以帮助我！

来源

2013-03-16 jdaio

我们可以得到你的CSS代码，以及没有ANCOR？ – 2013-03-16 19:40:45

你确定它不是在'cid.js'中的代码也是在点击时执行吗？ – 2013-03-16 19:49:38

@fizzydrink我的问题已经更新！ – jdaio 2013-03-16 19:58:27

要么改变你的处理器将preventDefault

$(".project").click(function(e) { 
     e.preventDefault(); 
     $("a.expand").removeClass("hovered"); 
     $(this).find("a.expand").addClass("hovered"); 
     $(".project_full").hide(); 
     var selected_tab = $(this).find("a").attr("href"); 
     $(selected_tab).fadeIn(); 
     return false; 
    });

或更改a标签href属性是这样的“的javascript：”

或者更换一个标签说跨度，让你的点击处理程序保持不变。

或名称属性添加到正确的位置标签（<a name='project_1'></a>），因为它被滚动到该标签或开始页面，因为与对应的名字

来源

2013-03-16 19:48:22 vittore

'return false'与调用e.preventDefault和e.stopPropagation相同 – 2013-03-16 19:53:39

问题解决了。原来这是两个脚本之间的冲突！ – jdaio 2013-03-16 20:10:23

jQuery fadeIn制作页面滚动到顶部/跳转

回答

相关问题