URL перенаправления Javascript с указанием положения окна в div

#javascript #html

#javascript #HTML

Вопрос:

У меня есть нижний колонтитул с некоторыми ссылками:

 <a href="javascript:void(0)" onClick="goToByScroll('newServices')">
   Our Services
</a>

И если пользователь находится на домашней странице, первый IF работает нормально, но если пользователь не находится на домашней странице, это перенаправление на домашнюю страницу, но не открывается в конкретном div.

 function goToByScroll(id){
    if ( window.location.href.indexOf('newhome') > -1 ) {
        $('html,body').animate({scrollTop: $("#" id).offset().top},1000);
    }
    else {
        window.location = "/newhome/"
        $('html,body').animate({scrollTop: $("#" id).offset().top},1000);
    }
}

Есть идеи?

*********** ОБНОВИТЬ*********************

 var userClickID = id;

    if ( window.location.href.indexOf('newhome') > -1 ) {
        $('html,body').animate({scrollTop: $("#" userClickID).offset().top},1000);
    }
    else {
        window.location = "/newhome/";
        $(document).ready(function() {
            $('html,body').animate({scrollTop: $("#" userClickID).offset().top},1000);
        });
    }

По-прежнему не работает.

1. Вы хотите перенаправить пользователя на другую страницу, а затем выполнить действие на этой странице?

2. Это не может сработать, потому что «строка другого случая 2» никогда не выполняется. Вам нужно выполнить анимацию прокрутки сразу после перезагрузки страницы. Приветствия.

3. @IgalS. Да, я хочу, чтобы пользователь перенаправил, а затем перешел к конкретному div

4. @lin есть идеи, как это сделать?

5. Я уже говорил вам: «Вам нужно сделать анимацию прокрутки сразу после перезагрузки страницы. Вы можете использовать «$(document). готово() «Приветствую»

Ответ №1:

На самом деле я провожу эти эксперименты с локальными файлами .html на моем рабочем столе: file:///C:/Users/myusername/Desktop/page2.html

В этом примере для перехода к вашему div используется ? параметр url:

 <a href="page2.html?newServices">page2 - newServices</a>

Итак, создайте две html-страницы на своем рабочем столе с помощью этого кода:

 <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var href = window.location.href;
    var split = href.split("?");
    var afterSplit = "Error parsing url";
    if (split[1] != null) {
        afterSplit = split[1];
    }
    console.log(afterSplit);
    goToByScroll(afterSplit);
});
</script>
<style type="text/css">
.myDiv {width: 200px;height: 2000px;}
#one   {border: 3px solid green;}
#two   {border: 3px solid blue;}
#three {border: 3px solid red;}
</style>
</head>

<body>
<div id="one" class="myDiv">ONE<button onclick="goToByScroll('two');">goToByScroll</button><a href="page2.html?three">page2.html?three</a></div>
<div id="two" class="myDiv">TWO<button onclick="goToByScroll('three');">goToByScroll</button></div>
<div id="three" class="myDiv">THREE<button onclick="goToByScroll('one');">goToByScroll</button></div>

<script type="text/javascript">
var timeMs = 1000;

function goToByScroll(ID){
    $('body').animate({scrollTop: $('#' ID).offset().top}, timeMs);
}
</script>

</body>
</html>

Скажите мне, это то, чего вы хотите

Надеюсь, это поможет

1. Не следует ли вместо этого использовать хэши URL-адресов?

2. @KendallFrey Я пробовал использовать хэш, но по умолчанию он быстро переходит к элементу #id на всех веб-сайтах без плавной прокрутки.. Я не знаю, как предотвратить переход по умолчанию с помощью хэшей, вы знаете, как это сделать?