Question

我不知道我能解释我的问题有多好，所以我制作了两个html文件并尝试用这些文件解释我的问题。

我在主页上使用jquery（我从网上获取的代码）使用scroll to div元素。因此，当用户点击链接时，它将向下滚动到主页中的特定元素。问题是当用户离开主页和其他网页时，这些链接就会死机，无法正常工作。

的index.html

<!DOCTYPE html>
<html>

    <head>
        <title>Scroll Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="text/javascript" src="./jquery.js"></script>
        <script type="text/javascript" src="./script.js"></script>
    </head>

    <body>

        <div class="main-wrap">

            <h1>This is scroll demo</h1>

                <div id="con1">
                    <h3>Container 1</h3>
                    <img src="./img/img1.jpg" alt="image 1" />
                </div>
                <div id="con2">
                    <h3>Container 2</h3>
                    <img src="./img/img2.jpg" alt="image 2" />
                </div>
                <div id="con3">
                    <h3>Container 3</h3>
                    <img src="./img/img3.jpg" alt="image 3" />
                </div>
                <div id="con4">
                    <h3>Container 4</h3>
                    <img src="./img/img4.jpeg" alt="image 4" />
                </div>
                <div id="con5">
                    <h3>Container 5</h3>
                    <img src="./img/img5.jpeg" alt="image 5" />
                </div>
                <div id="con6">
                    <h3>Container 6</h3>
                    <img src="./img/img6.jpg" alt="image 6" />
                </div>
                <div id="con7">
                    <h3>Container 7</h3>
                    <img src="./img/img7.jpg" alt="image 7" />
                </div>
                <div id="con8">
                    <h3>Container 8</h3>
                    <img src="./img/img8.jpg" alt="image 8" />
                </div>
                <div id="con9">
                    <h3>Container 9</h3>
                    <img src="./img/img9.jpg" alt="image 9" />
                </div>
            <div class="nav">

                <ul id="navlist">
                                              <li><a href="#con1">Container 1</a></li>
                                             <li><a href="#con2">Container 2</a></li>
                                             <li><a href="#con3">Container 3</a></li>
                                             <li><a href="#con4">Container 4</a></li>
                                             <li><a href="#con5">Container 5</a></li>
                                             <li><a href="#con6">Container 6</a></li>
                                             <li><a href="#con7">Container 7</a></li>
                                             <li><a href="#con8">Container 8</a></li>
                                             <li><a href="#con9">Container 9</a></li>
                                             <li><a href="lol.html">Container 10</a></li>
                                    </ul>

            </div>

        </div>
<style>.main-wrap { width: 960px; border: 1px solid #CCC; margin: 0 auto }
    img { max-width: 100%; }

.nav { background: #DDD; position: fixed; right: 10px; top: 10px; }
    #navlist, #navlist li { list-style: none; margin: 0; padding: 0 }
    #navlist li { margin: 20px }
    #navlist li a { padding: 20px }
</style>
<script>
$('a[href^="#"]').on('click', function(event) {

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

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }

});
</script>
    </body>
</html>

lol.html

<!DOCTYPE html>
<html>

    <head>
        <title>Scroll Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="text/javascript" src="./jquery.js"></script>
        <script type="text/javascript" src="./script.js"></script>
    </head>

    <body>

        <div class="main-wrap">

            <h1>container 10</h1>

                <div>
                    <h3>Lorem ipsum dolor</h3>
                    <p>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
                </div>                

            <div class="nav">

                <ul id="navlist">
                                              <li><a href="#con1">Container 1</a></li>
                                             <li><a href="#con2">Container 2</a></li>
                                             <li><a href="#con3">Container 3</a></li>
                                             <li><a href="#con4">Container 4</a></li>
                                             <li><a href="#con5">Container 5</a></li>
                                             <li><a href="#con6">Container 6</a></li>
                                             <li><a href="#con7">Container 7</a></li>
                                             <li><a href="#con8">Container 8</a></li>
                                             <li><a href="#con9">Container 9</a></li>
                                             <li><a href="lol.html">Container 10</a></li>
                                    </ul>

            </div>

        </div>
<style>.main-wrap { width: 960px; border: 1px solid #CCC; margin: 0 auto }
    img { max-width: 100%; }

.nav { background: #DDD; position: fixed; right: 10px; top: 10px; }
    #navlist, #navlist li { list-style: none; margin: 0; padding: 0 }
    #navlist li { margin: 20px }
    #navlist li a { padding: 20px }
</style>
<script>
$('a[href^="#"]').on('click', function(event) {

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

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }

});
</script>
    </body>
</html>

在此示例网页中，它有10个菜单（container1-10）。在这10个菜单中，其中9个（容器1-9）只能在index.html中使用。容器10菜单链接到另一个页面lol.html。

问题是当用户在 lol.html 时，如果用户点击容器1-9中的任何菜单，则没有任何反应。我想在单击容器1-9时将用户重定向到该元素。

希望我没有混淆任何人

Answer 1

首先，在不是主页的页面中编辑<li><a href="/homePage.html/#con1">Container 1</a></li>标记：

click

然后，您可以使用类似的内容从主页中的其他页面检测//Used for the demo, just get the window's location var simulatedURL = "www.domaine.org/#case4"; var getAnchor = simulatedURL.split("#"); $('a[href="#' + getAnchor[1] + '"]').trigger("click");：

variant

请参阅quick Fiddle

Answer 2

希望这对你有用..

$('a[href^="#"]').on('click', function(event) {
 var target = $( $(this).attr('href') );
 if(target.length==0)
   window.location.href='index.html'+$(this).attr('href');
 else
 {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: target.offset().top
    }, 1000);
 }
});

Answer 3

由于您从主页导航到lol.html，因此您可以使用history.back返回上一页。

$('a[href^="#"]').on('click', function(event) {
history.back();
});

如果滚动到div不存在，则重定向到主页

3 个答案: