首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >滚动到部分

滚动到部分
EN

Stack Overflow用户
提问于 2015-11-09 22:01:30
回答 2查看 627关注 0票数 0

我有以下代码,我的问题是如何添加,以便当用户单击链接时,滚动将被添加到类.instructors部分

代码语言:javascript
运行
复制
<?php if($hasSections): ?>

                    <div class="instructors-links">
                        <?php foreach ($sections as $section): ?>
                            <a href="#section<?php echo $section['id']; ?>">
                                <div class="instructors-img">
                                    <img src="<?php echo $section['image']['url']; ?>" />
                                    <h2><?php echo $section['title']; ?></h2>
                                </div>
                            </a>

                        <?php endforeach; ?>
                    </div>

                    <div class="instructors">
                        <?php foreach ($sections as $section): ?>

                            <section id="section<?php echo $section['id']; ?>">
                                <h1 class="section-title"><?php echo $section['title']; ?></h1>
                                <div class="section-content">
                                    <?php echo $section['content']; ?>
                                </div>
                            </section>

                        <?php endforeach; ?>
                    </div>



                    <script type="text/javascript">
                        var $sections = jQuery('.instructors section'), //Each section of content
                            $sectionLinks = jQuery('.instructors-links a'); //Each section link

                        //When a section link <a> tag is clicked
                        $sectionLinks.click(function(e) {
                            e.preventDefault(); //prevent the default actions from happening like following the link and scrolling down to the content

                            changeSection(
                                jQuery(this).attr('href').replace('#', '') //Gets the href value of the clicked <a> tag and removes the "#" character
                            ); //Passes the section link to the "changeSection" function
                        });

                        changeSection('section1'); //When the page loads, display the "section1" section
                        function changeSection(sectionID) {
                            $sections.stop(true).hide(); //Stop animating and hide all sections
                            $sections.filter('#' + sectionID).stop(true).fadeIn(); //Display the section with the same ID as the section link that was clicked

                            $sectionLinks.removeClass('selected'); //Remove the selected class from all section link <a> tags
                            $sectionLinks.filter('[href="#' + sectionID + '"]').addClass('selected'); //Add the "selected" class to the section link that was clicked
                        }

                    </script>

                <?php endif; ?>

其思想是,当用户单击链接时,文本会发生变化,页面会向下滚动到该文本。

EN

回答 2

Stack Overflow用户

发布于 2015-11-09 22:44:51

这将动画滚动到“.instructors”部分。

代码语言:javascript
运行
复制
 function changeSection(sectionID) {
        $sections.stop(true).hide(); //Stop animating and hide all sections
        $sections.filter('#' + sectionID).stop(true).fadeIn(); //Display the section with the same ID as the section link that was clicked

        $sectionLinks.removeClass('selected'); //Remove the selected class from all section link <a> tags
        $sectionLinks.filter('[href="#' + sectionID + '"]').addClass('selected'); //Add the "selected" class to the section link that was clicked

        $('html, body').animate({
            scrollTop: $sections.offset().top
        }, 2000);

  }
票数 0
EN

Stack Overflow用户

发布于 2015-11-09 22:49:54

我在JS中创建了一个关于滚动的"helper“函数

代码语言:javascript
运行
复制
function goToByScroll (id) {
    // Reove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    },
        'slow');
}

你应该传递id,这样就可以工作了。

代码语言:javascript
运行
复制
goToByScroll('section1');

应在此id中定位窗口

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33610842

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档