Question

编辑：我决定在我的网站上废弃这种方法，一次只打开一个手风琴标签。（当用户滚动到他们想要的设置时）

我没有尝试过堆栈溢出，谷歌也一直在努力让我的主页滚动到页面顶部（当我的手风琴div打开时）。我不知道我错过了什么......

以下是我所指的页面：calebelmeer.info/2.0/projects.php

我希望锚点向上滚动，点击我的手风琴标签，这样用户就不需要向下滚动页面来查看手风琴内容了。

对于Jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

手风琴分组：

<div id="accordion">
    <a id="tab1" class="tab">Website Criteria</a>
    <div id="tab1_Open" class="hidden open">
        <p>To make this website I followed the suggestions given via the modules in the Rightskill program. This required all of the following:
        <ul>
            <li>- A Style Tile</li>
            <li>- Wireframes</li>
            <li>- Prototype pages via Photoshop</li>
            <li>- A navigatable prototype in Invisio</li>
            <li>- Understanding of HTML5, CSS3, JS, jQuery, and Responsive Design.</li>
            <li>- Mobile and Cross Browser Support</li>
        </ul>
        <hr>
        <p>* The gradients were made with ColorZilla's <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">Gradient Generator</a>.</p>
        <p>* My <a href="http://www.colourlovers.com/palette/4218192/Stormy_Seas" target="_blank">Color Palette</a> is from Colour Lovers.</p>
    </div>
    <a id="tab2" class="tab">Java Code</a>
    <div id="tab2_Open" class="hidden open">
        <p>Info: This doc is a project I did in Java for my Advanced Data Structures class.</p>
        <br>
        <p>Note: There is a test output at the end of the document.</p>
        <div class="pdf-wrap">
            <iframe class="frame" src=" https://docs.google.com/document/d/1J1QyDwrXOSjxbQf6xzabBPZzNEZiS2a5SOBjx7EbCvQ/pub?embedded=true"></iframe>
        </div>
        <div class="mobile">
            <hr>
            <p>This document is not viewable on this device. It cannot be viewed on displays with a width less then 801px, nor height less than 701px.</p>
        </div>
    </div>
    <a id="tab3" class="tab">POS Proposal</a>
    <div id="tab3_Open" class="hidden open">
        <p>Info: The following doc was a group project for my System Analysis and Design class.</p>
        <br>
        <p>I was primarily responsible for putting together the Process Modeling and Data Modeling sections. I also was in charge of formatting the final document.</p>
        <br>
        <div class="pdf-wrap">
            <iframe class="frame" src=" https://docs.google.com/document/d/1S7_pkqOUkUD-bZZLcvXqk3oudNf7FzEpoKM38iwnEZA/pub?embedded=true"></iframe>
        </div>
        <div class="mobile">
            <hr>
            <p>This document is not viewable on this device. It cannot be viewed on displays with a width less then 801px, nor height less than 701px.</p>
        </div>
    </div>
</div>
<script src="js/accordion.js"></script>

js / accordion.js：

$( document ).ready(function() { // when page is loaded

    function toggleActive(link){ // Set anchor to active
        if ( $(link).hasClass("active") ) {
            $(link).removeClass("active");
        } else {
            $(link).addClass("active");
        };
    };

    function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed
        time = typeof(time) != 'undefined' ? time : 1000;
        verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $(selector);
        offset = element.offset();
        offsetTop = offset.top + verticalOffset;
        $('html, body').animate({
        scrollTop: offsetTop
        }, time);
    }

    $('#accordion a').click(function(event) {
    // function when a tab is clicked   

        var link = '#' + event.target.id // set anchorLink variable to the anchor being clicked

        // Open clicked tab
        if (link == "#tab1") {
             // Show tab 1
            toggleActive(link);
            $( "#tab1_Open" ).slideToggle( "fast", function() {
                // want anchor to be at top of page so accordion content is not hidden
                scrollToElement($('#tab1'), 500);
            });
        } else if (link == "#tab2") {
            // Show tab 2               
            toggleActive(link);
            $( "#tab2_Open" ).slideToggle( "fast", function() {
                // want anchor to be at top of page so accordion content is not hidden
                scrollToElement($('#tab2'), 500);
            });
        } else if (link == "#tab3") {
            // Show tab 3
            toggleActive(link);
            $( "#tab3_Open" ).slideToggle( "fast", function() {
                // want anchor to be at top of page so accordion content is not hidden
                scrollToElement($('#tab3'), 500); 
            });
        } else {
            // Do nothing for other links
        };
    });
});

Answer 1

尝试使用scrollToElement函数中的$('html,body')替换$('article')。

请记住，第一个参数应该是一个字符串，因此请调用scrollToElement('#tab2', 500);。

scrollToElement函数中的偏移量计算需要进行一些调整。

如何让我的手风琴锚点滚动到浏览器窗口的顶部？

1 个答案: