1. Куча / Говнокод #7424

    +126

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    <div id="scroller">
  <a href="javascript:scroll(0,0)">Наверх</a>
</div>

<style type="text/css">
#scroller {
position:fixed;
left:0px;
top:100%;}

#scroller a {
position:relative;
top:-47px;
padding:5000px 10px 30px 10px;}

#scroller a:hover {background:#d8e3f0;}
</style>

    Скролл страницы наверх, прикреплённый к левой границе экрана. Надпись "Наверх" -- внизу экрана. Опускаю блок под экран -- "top:100%", а потом поднимаю ссылочку наверх -- "top:-47px".

    Запостил: opex_jr, 02 Августа 2011

    Комментарии (18) RSS

    • ava opex_jr 02.08.2011 23:18 # 0

      Верный стиль:

      #scroller {
      position:fixed;
      left:0px;
      bottom:27px;}

      #scroller a {
      padding:5000px 10px 30px 10px;}

      #scroller a:hover {background:#d8e3f0;}
      Ответить

    • ava Lure Of Chaos 02.08.2011 23:18 # 0

      > top:-47px;
      > padding:5000px
      рядом смотрится офигитительно - да и просто последнее число = )
      Ответить

      • ava opex_jr 02.08.2011 23:20 # 0

        Так а это ваще хак) Так и надо. Это и есть прикрепление к левой стороне экрана. Ну можно и поменьше конечно число поставить)
        Ответить

        • ava Lure Of Chaos 02.08.2011 23:22 # 0

          а float и clear на кой?
          да и первое число - верхнее поле, при чем тут оно?
          Ответить

          • ava opex_jr 02.08.2011 23:27 # 0

            Ну сам блок слева внизу в углу. А так до самого верха экрана становится. Так а, кстати, как высоту задать блоку на весь экран? height:100% же не катит.
            Ответить

            • ava Lure Of Chaos 02.08.2011 23:30 # −1

              я че то не понял, в какой угол зажать надо?
              Ответить

              • ava opex_jr 02.08.2011 23:33 # −1

                http://photo.itgrade.ru/index.php?page=puppies
                Ответить

                • ava Lure Of Chaos 02.08.2011 23:38 # −1

                  понял
                  ну во-первых, лучше bottom не в пикселах, а в более шрифто-дружелюбных (ex, em...)
                  во-вторых, можно попробовать min-height:100%;
                  Ответить

                  • ava opex_jr 02.08.2011 23:48 # −1

                    Круто, блоку помог min-height:100%, но ссылка не поддаётся. Без пэддингов, кажется, не обойтись. Ведь нужно, чтобы переход по ссылке срабатывал, даже когда мышь нажимает не на сам текст, а, получается, на пэддинг. Т. е. функциональность нужна <a><div></div><a> такая. Но W3 консорциум запретил так делать) И display:block на ссылке тоже не помогает.
                    Ответить

                    • ava Lure Of Chaos 02.08.2011 23:50 # −1

                      а если <div></div><a></a>?
                      Ответить

                      • ava opex_jr 03.08.2011 00:02 # −1

                        Не понял, а зачем так?
                        Получилось сейчас
                        #scroller {
                        position:fixed;
                        left:0px;
                        bottom:0px;
                        height:100%;}

                        #scroller a {
                        padding:10px 10px 10px 10px;
                        height:100%;
                        display:block;}

                        Работает так же, только надпись теперь вверху) И что ни мути с top/bottom не получается её к низу прикрепить. Вверху пробел появляется.
                        Ответить

                        • ava Lure Of Chaos 03.08.2011 00:03 # −1

                          ладно, завтра поиграюсь ) ща спать )
                          Ответить

                          • ava opex_jr 03.08.2011 00:15 # −1

                            http://peeep.us/3b4db9ff -- код из первого коммента
                            http://peeep.us/9ff472a0 -- из предыдущего (тока панель пип.аса закрывает надпись вверху)
                            Ответить

        • ava roman-kashitsyn 02.08.2011 23:33 # 0

          Ага, видел в Vaadin такие хаки. только там числа побольше были.
          Ответить

      • ava sectus 03.08.2011 10:16 # 0

        Добрый сегодня?
        Ответить

    • ava Yurik 03.08.2011 00:32 # −1 

      <html>
	<head>
		<style type="text/css" media="all">
			body, p {
				margin: 0;
			}
			
			#scroller {
				position: fixed;
				float: left;
				height: 100%;
				width: 100px;
				background: grey;
			}

			#scroller a {
				height: 100%;
				display: block;
			}
			
			#scroller p {
				padding: 10px;
				position: absolute;
				bottom: 0px;
			}
		</style>
	</head>
	
	<div id="scroller">
	  <a href="#top"><p>Наверх</p></a>
	</div>
</html>

      Рекомендую задавать такие вопросы на StackOverflow.
      Саундтрек: youtu.be/LEp8HWKeQ_8
      Ответить

      • ava Yurik 03.08.2011 00:46 # 0

        Пожалуй, единственный минус только в том, что нужно указывать ширину блока самому.
        Ответить

    • ava none1 25.08.2021 08:43 # 0

      Вот Маринку, или других баб, постоянно надо было просить да упрашивать, да корректировать и учить. А тут пацан (!) выполнял такое, о чём я и сам не знал, что так можно. И первый раз видел, чтобы сосали с таким энтузиазмом, стараясь и смотря мне прямо в глаза... Это что-то нереальное, да у него на лице написано крупными буквами: "Мне! Это! Самому! Нравится!"
      Ответить

    Добавить комментарий