Question

我正在尝试使用slideUp和Down效果在同一网页的各个部分之间进行切换。基本上，我设置了

我可以在jsfiddle上看到我的HTML，CSS和JQuery代码：（http://jsfiddle.net/dbartolome/2s0jy72q/1/）

   $("#work").click(function(){
   event.preventDefault();
   $("header").slideDown(700);

更新：我发现这个东西叫做滚动在线锚定。你的想法是什么？我不明白他们代码的一部分。这是他们的jsfiddle :( http://jsfiddle.net/BjpWB/4/）

    function scrollToAnchor(aid){
     var aTag = $("a[name='"+ aid +"']");
     $('html,body').animate({scrollTop: aTag.offset().top},'slow');
     }

     $("#link").click(function() {
     scrollToAnchor('id3');
    });

我迷失了函数scrollToAnchor（援助）的内容

Answer 1

您可以使用href标记来调用要显示的部分的ID。

$('a').on('click', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
   $(link).slideUp(700);
});

这将使用您链接中的“＃”作为您的ID标记选择器所需的“＃”。

如果你只给一个你将要使用的标签的类，以及在你的jquery调用这些标签的位置，那将是最好的。除此以外。您将停止所有标签的默认操作。

$('a.myClass').on('click', function(e){

我将.click更改为.on，因为它是一种更清晰的方式将事件绑定到您的功能，并允许您灵活地在路上。

函数中的$（this）指的是您要点击的特定标签。

最后，当使用选择器查找带有和id的元素时，您需要确定并在id和'。'之前使用'＃'。在课程名称之前。

对问题的回应

您可以改用“工作”。 “链接”和“工作”这两个词只是变量。因此，您可以将其命名为任何您想要的名称，但只要您在使用此变量所包含的信息的任何位置使用相同的名称，就不会更改任何内容。你可以称它为x或z，它仍然可以工作。

真正重要的部分是变量等于什么。在我创建的函数中，变量等于您在单击的任何链接的href标记中存储的链接。

如果单击导航中的“工作”链接，变量“链接”等于“#work”，因为这是该导航项中href的值。同样，如果您随后单击下一个导航项，则变量“link”将等于该项目中的href。

我使用它的原因是允许您从长远来看编写更少的代码，当您向导航中添加更多链接以及向页面添加更多部分时，无需返回并编辑此jquery函数。

Answer 2

获取带偏移的部分的位置，并将scrollTop动画向下移动到元素的顶点

$('a').on('click', function(e){
    e.preventDefault();
    var targetID = $(this).attr('href')
    var elementPosition = $(targetID).offset().top
    $('html,body').animate({scrollTop: elementPosition},'slow');
});

jsFiddle Example

它可以向上或向下工作，因此您甚至可以使用它来添加“返回顶部”链接

<header id="top">...</header>

只需链接到#top

即可

<a href="#top">Back to top</a>

在示例及上面的代码中，请注意链接的href是滚动到的位置的id

<小时/> 在jquery代码中，它获取单击的href的{{1}}并选择ID等于它的元素。然后代码找到具有该id的元素的顶部偏移点，并为其设置动画a。

<强>参考

animate() - 用于CSS属性动画，也在那里找到scrollTop解释
attr() - 用于获取scrollTop值
offset() - 用于查找文档范围内元素的顶部位置。
on() - 用于在执行滚动之前听取点击 - 与click()相同

slideUp / Down使用jquery从一个页面的一个部分到另一个部分

2 个答案: