Question

我正在寻找一种解决方案，我可以将一个元素锚定到不同的部分。

<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时，按钮应该变为“转到顶部”。

是否有任何jquery来实现它？

Answer 1

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();
    });
});

Answer 2

下面的代码在普通浏览器中运行，但是当我尝试运行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();

    }

});

关于Button的CSS定位使用fixed：

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

More info

Answer 3

每次点击按钮，根据href的值找到当前值，根据需要更新href属性。

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

Answer 4

基本理念可能是这样的：

$("#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');
    }
});

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

4 个答案: