JavaScript анимированный гладкой прокрутки

По умолчанию, когда у вас есть фрагмент ссылки, как это:JavaScript анимированный гладкой прокрутки

<a href="/some-url#some-fragment">some text</a>

браузер просто прокручивает вниз к этому фрагменту мгновенно. Как я могу запрограммировать его для плавного перехода к этому фрагменту со стандартным JS?

Вот пример:

Example (Чтобы увидеть рабочий пример, просто нажмите на 3 стрелки внутри 3 кругов и наблюдать плавный анимированный скроллинг)

источник

2013-10-09 Anshu Dwibhashi

Вы должны использовать JQuery Lib или плагины прокрутки –

@RoyMJ пример, который я предоставил, похоже, не делает этого. –

Я думаю, что он делает. – Sid

хорошо, я думаю, что я нашел свой ответ, отправляя его здесь, чтобы помочь другим с аналогичным сомнения:

<html> 
    <head> 
    <script type="text/javascript"> 
     var singleton = {}; 
     var timeout = singleton; 

     window.onscroll = windowScroll; 

     function windowScroll() 
     { 
     var toTop = document.getElementById('toTop'); 
     toTop.style.display = ((window.scrollY > 0) ? "block" : "none"); 
     } 

     function scrollStep() 
     { 
     var y1 = window.scrollY - 1000; 
     window.scrollTo(0, y1); 

     if (y1 > 0) 
     { 
      timeout = window.setTimeout(scrollStep, 100); 
     } 
     else if (timeout != singleton) 
     { 
      window.clearTimeout(timeout); 
     } 
     } 
    </script> 

    <style type="text/css"> 
     #toTop { 
     display: block; 
     position: fixed; 
     bottom: 20px; 
     right: 20px; 
     font-size: 48px; 
     } 

     #toTop { 
     -moz-transition: all 0.5s ease 0s; 
     -webkit-transition: all 0.5s ease 0s; 
     -o-transition: all 0.5s ease 0s; 
     transition: all 0.5s ease 0s; 
     opacity: 0.5; 
     display: none; 
     cursor: pointer; 
     } 

     #toTop:hover { 
     opacity: 1; 
     } 
    </style> 
    </head> 

    <body> 
    <p id="top">your text here</p> 
    <a href="#top" onclick="scrollStep(); return false" id="toTop" 
     ><img src="images/go-to-top.png" alt="Go to top" title="Go to top"></a> 
    </body> 
</html>

источник

2013-10-09 09:44:35

Я сделал некоторые улучшения в отношении стиля кода, стабильности и доступности.Возможно, переход не работал/не работал, поскольку он не применяется к элементам с 'display: none'. Чтобы обойти это, вам, вероятно, придется использовать 'opacity' все время и иметь задержанный переход для свойства' height'. – PointedEars

Ну вы должны попробовать что-то вроде этого

$('html,body').animate({ 
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_Conten 
tPlaceHolder1_txtcomment").offset().top 
},'slow');

где * # * ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment это идентификатор, где вы хотите переместить или прокручивать

другой Approch должен поместить это в функции

function scrollme() { 
$('html,body').animate({ 
scrollTop:$("#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_txtcomment").offset().top 
},'slow'); 
} <a onclick="javascript:scrollme();">some text</a>

Я надеюсь, что это поможет.

С уважением .. :)

[Обновлено]

URI, хэш-это отличный способ сделать JavaScript/AJAX страницы с динамическим bookmarkable контента. Его можно использовать так же, как строки запроса , но изменения не вызовут нового запроса страницы. Это позволяет вам хранить данные в URI, которые могут быть прочитаны и изменены JavaScript без перезагрузки страницы.

Для непосвященных, местоположение хэш URI это все после знака # в URI:

http://domain.com/page.html#i-am-a-hash примечание стороны: URI хэши не передаются обратно на сервер, вы можете получить доступ только к ним клиента -боковая сторона.

проверить этот блог

http://ole.michelsen.dk/blog/using-uri-hash-instead-of-query-strings/

источник

2013-10-09 09:35:04

Я знаю, что могу это сделать. Мое сомнение в том, как это делает пример? не говорит, href = "javascript: something()" он говорит href = "# some-fragment" –

и я хочу использовать стандартный javascript –

ОК я обновляю –

JavaScript анимированный гладкой прокрутки

ответ

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