单击锚点时更改href

Question

I have a question about how I can dynamically change a href="" in a button. 我有一个关于如何动态更改按钮中的href=""的问题。

The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page: 下面的jsfiddle显示了一个从着陆页开始固定在视口底部的按钮：

http://jsfiddle.net/Hm6mA/3/ http://jsfiddle.net/Hm6mA/3/

The html of the button is like so: 按钮的html如下所示：

<div class="button">
    <a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
        <img src="img/down.png" alt="down">
    </a>
</div>

When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. 单击它时，我希望它滚动到下一部分并将href =“”更改为页面的下一部分。 So, when it is first clicked, the href will change to #second. 因此，第一次单击时，href将更改为#second。 It would obviously also need to change when the user manually scrolls past a section. 当用户手动滚动到某个部分时，显然也需要进行更改。

This is for a single page website. 这是针对单页网站的。 How would I go about such a thing? 我将如何处理这样的事情？

Answer 1

Use .prop() to change its value 使用.prop（）更改其值

$(".button").on('click', function(){
    $('.button').find('a').prop('href', '#services');
});

Demo 演示

Answer 2

I am not used to jquery. 我不习惯jQuery。 Here is a pure javascript solution. 这是一个纯JavaScript解决方案。 It surely changes the hash value. 它肯定会更改哈希值。

<body>

    <div id="sections">

        <section id="s100">asdfasd</section>
        <section id="s101"></section>
        <section id="s102"></section>
        <section id="s103"></section>
        <section id="s104">asdfasdasdfsdf</section>
        <section id="s105"></section>

    </div>

    <div class="nav-bar">

        <a id="next-button" class="button" href="#s100">Next</a>

    </div>

    <script type="text/javascript">

        var sections = document.getElementById("sections");

        var nextButton = document.getElementById('next-button');

        sections.onscroll = function (evt) {

        }


        var counter = 100;
        var limit = 105;

        // closure
        nextButton.onmouseup = function (evt) {

            var incCounter = function () {
                // add your custom conditions here

                if(counter <= limit)
                    return counter++;
                return 0;
            };

            var c = incCounter();
            if(c != 0)
                this.setAttribute('href', "#s" + c);
        }

    </script>

</body>

CSS CSS

html, body {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #sections {
            height: 50%;
            width: 100%;
            overflow: scroll;
        }

        .nav-bar {
            margin: 30px 20px;
        }

        .button {
            text-decoration: none;
            border: 1px solid #999;
            padding: 10px;
            font-size: 120%;
        }

Answer 3

I have written a small jQuery plugin for that, just pushed it to GitHub. 我为此编写了一个小jQuery插件，将其推送到GitHub。 https://github.com/ferdinandtorggler/scrollstack https://github.com/ferdinandtorggler/scrollstack

What you basically want to do is calling 你基本上想做的就是打电话

$('.button').scrollstack({stack: ['#first', '#second', ... ]});

You dont even need the link when you call it on the button. 在按钮上调用该链接时，您甚至不需要链接。 So check it out and let me know if it works for you. 因此，请检查出来，让我知道它是否适合您。 ;) ;）

Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/ 在这里您可以尝试并阅读更多内容： http : //ferdinandtorggler.github.io/scrollstack/

Answer 4

You can use fullPage.js plugin to achieve what you want. 您可以使用fullPage.js插件来实现所需的功能。 Maybe it is faster than coding it from cero :) 也许它比使用cero编码要快:)

Demo fullPaje.js 演示fullPaje.js
Page 页

单击锚点时更改href

问题描述

4 个解决方案

解决方案1
2 2013-10-06 07:29:47

解决方案2
1 2013-10-06 08:05:10

解决方案3
1 2013-10-06 08:27:02

解决方案4
1 已采纳 2013-10-09 10:14:56

单击锚点时更改href

问题描述

4 个解决方案

解决方案1 2 2013-10-06 07:29:47

解决方案2 1 2013-10-06 08:05:10

解决方案3 1 2013-10-06 08:27:02

解决方案4 1 已采纳 2013-10-09 10:14:56

解决方案1
2 2013-10-06 07:29:47

解决方案2
1 2013-10-06 08:05:10

解决方案3
1 2013-10-06 08:27:02

解决方案4
1 已采纳 2013-10-09 10:14:56