Question

我在div元素中有一个链接列表，我在点击链接时使用dropcontent.js将内容加载到另一个div。我现在想添加一些代码，将点击的链接滚动到浏览器窗口的顶部。

对于列表中的每个项目，HTML都是这样的：

<div class="work">
    <h3><a class="scroll" href="project2.html">Project 2</a></h3>
    <div class="projectIntro">
        <p>This is some intro text for project 2</p>
    </div>
    <div class="pictures"></div>
</div>

我找到了在点击链接时滚动到ID的教程（通过使href成为你想要滚动到的div的ID - 不幸的是我不能这样做因为我的href实际上是一个单独的html页面甚至虽然它使用dropcontent将其加载到当前页面。

我还找到了一个在页面加载时滚动到特定ID的教程，但没有一个只是说当点击给定类的锚时，将其滚动到浏览器窗口的顶部。

有人可以帮我解决这个问题吗？感谢。

更新：

我使用以下代码完成了滚动工作：

$('.work a').click(function() {
         $('html,body').animate({scrollTop: $(this).offset().top}, 500);
         });

然而，我的dropcontent.js已不再有效...我认为因为我在同一次点击时发生了两个功能......我希望首先加载内容，然后滚动。

这是我的dropcontent.js

$('.work a').click(function(event) {
event.preventDefault();

var parent = $(this).parents(".work");
var content_holder = parent.children(".pictures");

if (parent.hasClass("selected_work")) {
  close_other();
  return;
}

close_other();

parent.addClass("selected_work");
content_holder.load(this + " #content .work");

$('.selected_work img').attr("src", "images/arrow_close.gif");

});


function close_other() {

var selected_work = $('.selected_work');

selected_work.children('.pictures').empty();    
$('.selected_work img').attr("src", "images/arrow_open.gif");
selected_work.removeClass("selected_work")
}

});

所以现在我只需要整合这两位代码就可以让它们一起工作......到目前为止，我没有运气这样做 - 如果我添加了滚动（动画）功能，加载功能就会停止工作。 ..

更新2

原来这是引起问题的其他因素 - 我现在已经开始工作了！

Answer 1

以下是将链接滚动到顶部的方法：

$('.work a').click(function() {
     $('html,body').animate({scrollTop: $(this).offset().top}, 500);
});

Answer 2

以下链接的回答问题与所有喜欢

的人密切相关且信息良好

将页面滚动到某个元素div div
点击该元素滚动到页面顶部从该元素锚定
点击该元素滚动到页面顶部包含所有锚链接的实际div id; “click catcher div”

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

Answer 3

不是您问题的直接答案，而是您可能想要使用的好参考。

http://demos.flesler.com/jquery/scrollTo/

jQuery scrollTo插件可让您滚动到页面中的任何锚点<a>。如果你只是在你的窗口上放置一个锚点，你可以使用scrollTo直接用动画去那里。

jQuery - 如何在单击时将锚点滚动到页面顶部？

3 个答案: