2015-11-23 4 views
0

Я прочитал кучу тем и не могу получить ни одно из решений, которые я видел для работы. У меня есть раздел Div, где содержимое (изображения, ext и т. Д.) Меняются, изменяя innerhtml p. Я не могу понять, почему я не могу заставить его прокручивать назад вверху #section, когда я переключаюсь между «панелями», которые я создал, переключая innerhtml. Другими словами, вы загружаете панель, нажимая на изображение/текст, прокручиваете вниз и видите содержимое, а затем, когда вы нажимаете на другую «панель», я просто хочу, чтобы она прокручивалась вверх. Есть идеи?ScrollTop и ScrollTo Не работает при изменении innerHtml в div

Это то, что я в настоящее время have-

 case 1: 

        text = '[new html] '; 

        document.getElementById("demo").innerHTML = text; 
        document.getElementById("section").scrollTo(0,0); 
        break; 

Это HTML в моем исходном теле, когда он loads-

<div id="section"><div id="sectionwrap"> 

<p id="demo"></p> 
</div></div> 
+0

Пожалуйста сформулируем jsfiddle или codesnippet с кодом :) – www139

+0

Попробую воссоздать сценарий в JSfiddle реальный быстрый, но мой фактический код целая куча вещей – Breh

+0

Ок, спасибо :) – www139

ответ

0

это то, что вы хотели? Это немного трудно понять ваш вопрос так, медведь со мной :)

window.onload = function(){ 
 
var x; 
 
document.getElementById('aa').onclick = function() { 
 
    document.getElementById("section").scrollTop = 0; 
 
    document.getElementById("section").style.background = 'red'; 
 
}; 
 
};
p { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-family: Impact; 
 
    line-height: 30px; 
 
} 
 
#sectionwrap { 
 
    width: 100%; 
 
    height: 1600px; 
 
    background: rgba(255, 255, 122, .5); 
 
} 
 
#sidebar { 
 
    width: 12.5%; 
 
    height: 1000px; 
 
} 
 
#aa { 
 
    background: blue; 
 
} 
 
#aa:hover { 
 
    background: green; 
 
} 
 
#section { 
 
    overflow-y: scroll; 
 
    width: 100%; 
 
    height: 200px; 
 
    float: left; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
    background: black; 
 
    background-size: 100%; 
 
    padding: 0%; 
 
    text-align: center; 
 
}
<body> 
 
    <div id="section"> 
 
    <div id="sectionwrap"> 
 
     <p id="demo">1 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <div id="aa" onclick="z(9)">2</div> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

+0

См. это не запускает скрипт из document.getElementById ('ab'). onclick после запуска первой функции идентичным образом. все это не соответствует теме моего исходного вопроса, но может быть связано: http://jsfiddle.net/Breh/72c2htho/ – Breh

+0

Извините, я никогда не использовал jsfiddle, как я уже сказал, но я не понимаю, почему мои функции Не звоните в этот: http://jsfiddle.net/Breh/mLkfrvby/, если я использую reflex onclick в моей ссылке div. Я использую это 100 раз на моей текущей странице JS и вызов функций. – Breh

0

Если кто-то имеет этот вопрос я получил его на работу.

У меня есть переключатель, который изменился между наборами innerHTML для #section div (и переключает некоторые другие косметические вещи). Если у вас есть аналогичная настройка на странице, вызовите команду ScrollTop перед вашим коммутатором. Это достигло того, что я хотел, чтобы изменить innerHTML с помощью переключателя с разными настройками в каждом случае коммутатора, но перед тем, как была вызвана функция «изменение содержимого», перед тем, как вызывать новый элемент html, прокрутите назад вверх.

Смежные вопросы