个人中心
gpt4 book ai didi

javascript - 水平一页网站不会将 "backwards"转到上一个 DIV

转载 作者：太空宇宙 更新时间：2023-11-04 13:54:32 25 4
gpt4 key购买 nike

快速背景故事:

我的一切都运行良好，但过了一段时间后，我发现它不再正常运行。返回“页面”的能力对我来说非常重要，所以我开始撤消我最近所做的任何更改。那没有用，所以我决定重新创建框架(希望拼凑内容以找到问题点)，但问题仍然存在。我已将代码提炼为以下基础知识。

过去，我可以点击后退按钮，然后立即转到上一个面板。现在，除了更改“#page_name”并且当前面板移动 1px 之外，什么也没有发生。如果我点击了几个链接(从而存储了更多的历史“踪迹”)，那么当我第二次点击后退按钮时，我终于回到了一个状态，但不是正确的状态。

这是一个 fiddle :http://jsfiddle.net/gz9nW/

JQ

$(document).ready(function(){
    $('.main-nav').on('click',function (e) {
       e.preventDefault();

       var target = $(this).attr("href");
       $target = $(target);

       $('html, body').stop().animate({
           'scrollLeft': $target.offset().left,
           'scrollTop': $target.offset().top
       }, 900, 'swing', function () {
           window.location.hash = target;
       });
   });
});

CSS

html {
font: 100% 'PT Sans', sans-serif;
height:100%;
width:100%;
margin:0%;
padding:0%;
}
body {
    font-size:1.25em;
    width:100%;
    margin:0%;
    padding:0%;
    overflow:hidden;
}

    header {
        width:100%;
        position:fixed;
        z-index:5000;
        top:0%;
        left:0%;
        padding:0%;
        margin:0%;
        background:silver;
        }


    /*################################ NAV ################################*/

        nav ul {
            list-style:none;
        }
            nav ul li {
                display:inline;
                margin-right:5px;
            }


/*################################ WRAPPER ################################*/

    .wrapper {
        width:1000%; /* #PAGES X 100% */
        height:100%;
    }

/*################################ PAGES ################################*/

        .page-container {
            width:10%; /* 1 / #PAGES */
            display:inline-block;
            vertical-align:top;
            padding:0%;
            margin:0%;
            margin-right:-5px;
        }
            .page-container:nth-child(even) {
                background:lightgreen;
            }
            .page-container:nth-child(odd) {
                background:lightblue;
            }
            .page-contents {
                padding:10% 0%;
                width:61%;
                margin-left:auto;
                margin-right:auto;
                background:grey;
            }

HTML

<body>
    <header>
        <nav>
            <ul>
                <li><a class="main-nav" href="#home">Home</a></li>
                <li><a class="main-nav" href="#products">Products</a></li>
                <li><a class="main-nav" href="#services">Services</a></li>
                <li><a class="main-nav" href="#quote">Quote</a></li>
                <li><a class="main-nav" href="#about">About</a></li>
                <li><a class="main-nav" href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div class="wrapper">
        <div class="page-container" id="home">
            <div class="page-contents">
            home
            </div>
        </div>
        <div class="page-container" id="products">
            <div class="page-contents">        
            products
            </div>
        </div>
        <div class="page-container" id="part-list">
            <div class="page-contents">        
            part list catalog
            </div>
        </div>        
        <div class="page-container" id="services">
            <div class="page-contents">        
            services
            </div>
        </div>
        <div class="page-container" id="quote">
            <div class="page-contents">        
            quote request
            </div>
        </div>
        <div class="page-container" id="about">
            <div class="page-contents">        
            about
            </div>
        </div>
        <div class="page-container" id="contact">
            <div class="page-contents">        
            contact page
            </div>
        </div>
        <div class="page-container" id="inquiries">
            <div class="page-contents">        
            solution inquiries
            </div>
        </div>
        <div class="page-container" id="news">
            <div class="page-contents">        
            news
            </div>
        </div>
        <div class="page-container" id="legal">
            <div class="page-contents">        
            legal info
            </div>
        </div>
    </div>
</body>

这对这个元素来说是一个巨大的打击，因为这个特定的功能正是我所追求的。任何帮助将不胜感激!

最佳答案

这应该可以解决您的问题:

DEMO 

$(document).ready(function () {
    $('.main-nav').on('click', function (e) {
        e.preventDefault();
        var toTarget = $(this).attr('href');
        history.pushState(null, null, toTarget);
        $(window).triggerHandler('hashchange');
    });
});

$(window).on('hashchange', function () {
    if(!window.location.hash) return;
    var $target = $(window.location.hash);
    $('html, body').stop().animate({
        scrollLeft: $target.offset().left,
        scrollTop: $target.offset().top
    }, 900, 'swing');
});

关于javascript - 水平一页网站不会将 "backwards"转到上一个 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21993231/

25 4 0
文章推荐： java - 使用内部框架在另一个 GUI 中显示一个 GUI
文章推荐： css -
文章推荐： javascript - 前景和背景的CSS控制
文章推荐： javascript - 按钮旁边的弹出菜单
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com