如何使用相同的元素锚定到页面中的不同部分

我正在寻找一种解决方案，我可以将一个单一元素锚定到不同部分。如何使用相同的元素锚定到页面中的不同部分

<a href="#" id="navigate">Show more</a> 

<div class="jumbotron" id="customer"> 
    <div class="container"> 
    </div> 
</div> 
<div class="jumbotron" id="features"> 
    <div class="container"> 
    </div> 
</div> 
<div class="jumbotron" id="contact"> 
    <div class="container"> 
    </div> 
</div>

在上面的代码，如果我点击Show more应该带我去#customer。此按钮将保留在页面的左下角。现在，如果我再次点击相同的Show more，它应该带我到#features。最后，当我在#contact时，按钮应该变成'Go to top`。

是否有任何jQuery来实现这个？

来源

2014-03-06 user1012181

作为一个用户，我不喜欢这种做法。点击一个链接应该总是带我到相同的内容，而不是每次都不同。 – Blazemonger

@Blazemonger其实这种方法是针对单页网站的。而不是滚动到不同的部分，可以使用一个“显示更多”按钮导航到不同的部分。 – user1012181

当用户滚动到上一节时会发生什么？你想要“显示更多”将他们带到列表中的下一部分，或者是他们目前正在查看的下一部分？ – Blazemonger

DEMO

HTML

<a href="#" id="navigate" data-jump="0">Show more</a> 

<div class="jumbotron" id="customer"> 
    <div class="container">CUSTOMER</div> 
</div> 
<div class="jumbotron" id="features"> 
    <div class="container">FEATURES</div> 
</div> 
<div class="jumbotron" id="contact"> 
    <div class="container">CONTACT</div> 
</div>

jQuery的

$(function() { 
    $("#navigate").click(function (e) { 
     $(this).data("jump", $(this).data("jump")+1); 
     switch ($(this).data("jump")) { 
      case 1: 
       $(document).scrollTop($("#customer").offset().top); 
       break; 
      case 2: 
       $(document).scrollTop($("#features").offset().top); 
       break; 
      case 3: 
       $(document).scrollTop($("#contact").offset().top); 
       break; 
      default: 
       $(document).scrollTop(0); 
       $(this).data("jump",0) 
       break; 
     } 
     e.preventDefault(); 
    }); 
});

来源

2014-03-06 16:14:28 kei

如果我在第二部分通过滚动鼠标，然后点击'显示更多'选项？它应该带我到第三部分，而不是第二个权利？ – user1012181

每次单击该按钮时，根据href的值查找当前值，更新href属性以获取所需内容。

例如，现在的href被导航到“客户”，然后单击后，读出的href的价值，我们发现，它的指向customer，那么我们应该的href值更新到features部分。

来源

2014-03-06 16:00:08 albusshin

但我们如何在jQuery中实现这个？ – user1012181

这是基本的东西，你应该首先阅读一个简单的jQuery教程。基本上你应该为'a'标签实现一个onClick函数，并且使用$（“a＃navigate”）来查找'href'属性。attr（“href”）' – albusshin

基本的想法可能是这样的：

$("#navigate").attr('href', '#customer'); 
$("#navigate").click(function(){ 
    if($(this).attr('href') == '#customers'){ 
     $(this).attr('href', '#features'); 
    }else if($(this).attr('href') == '#features'){ 
     $(this).attr('href', '#contact'); 
    }else { 
     $(this).attr('href', '#customer'); 
    } 
});

来源

2014-03-06 16:06:58 goseo

下面的代码在普通浏览器中工作，但是当我尝试运行它JSFiddler时，那么点击次序不同。无论如何，它工作在正常的浏览器：

$("#navigate").on("click", function() { 

    var text = $(this).text() 
    var href = $(this).attr('href'); 

    if (href == "#") { 
     $(this).attr('href', '#customer'); 
    } 
    else if (href == "#customer") { 
     $(this).attr('href', '#features'); 
    } 
    else if ((href == "#features") && (text == "Show more")) { 
     $(this).text('Go to Top'); 
     $(this).attr('href', '#contact'); 

    } 
    else if ((href == "#contact") && (text == "Go to Top")) { 
     $(this).text('Show more'); 
     $(this).attr('href', '#'); 
     $(this).focus(); 

    } 

});

关于巴顿的CSS定位使用固定：

a { 
    position:fixed; 
    bottom:1px; 
    left:1px; 
}

More info

来源

2014-03-06 17:53:53 jyrkim

如何使用相同的元素锚定到页面中的不同部分

回答

相关问题