NOTICE 
Category (104)
글꼴 (2)
디카 (10)
모니터 (4)
백신 (2)
포토샵 (29)
블로그/스킨 (5)
웹팁 (5)
윈도우즈 (10)
Java (3)
Z_brd (0)
촬영지 (10)
html (2)
기타 (9)
컴퓨터 (10)
FireFox (2)
동영상 (0)

2014.06.16 09:59

1 html

1
2
3
<p id="back-top">
    <a href="#top">Back To Top</a>
</p>

2 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -150px;
}
 
#back-top a {
    width: 108px;
    display: block;
    text-align: center;
    font: 11px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #bbb;
 
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover {
    color: #000;
}
 
/* arrow icon (span tag) */
#back-top span {
    width: 108px;
    height: 108px;
    display: block;
    margin-bottom: 7px;
    background: #ddd url(up-arrow.png) no-repeat center center;
 
    /* rounded corners */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
 
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
#back-top a:hover span {
    background-color: #777;
}

3 Jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// hide #back-top first
$("#back-top").hide();
 
// fade in #back-top
$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
 
    // scroll body to 0px on click
    $('#back-top a').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

*튜토리얼 : http://webdesignerwall.com/tutorials/animated-scroll-to-top
*데모 : http://webdesignerwall.com/demo/scroll-to-top/scrolltotop.html

2007.03.26 18:30
<style type="text/css">
html
{scrollbar-face-color: #494949;
 scrollbar-highlight-color: #666666;
 scrollbar-3dlight-color: #000000;
 scrollbar-shadow-color: #333333;
 scrollbar-darkshadow-color: #000000;
 scrollbar-track-color: #3e3e3e;
 scrollbar-arrow-color: #000000};
</style>

위의 소스를 <head>와 </head>사이에 넣으면 됩니다.

스크롤바의 색상 바꾸기 소스는 <body>에 넣는 것이 보편적이었으나
블로그의 skin.html에서는 불가능한 것으로 여겨졌었는데
<head>와 </head>사이에 넣으면 완벽하게 구현됩니다.

http://tellme.tistory.com/님께서 자문해 주셨습니다.
2007.03.19 08:51

블로그에도 해당이 되는지는 잘 모르겠습니다만,
홈페이지 창에 스크롤바 없애는 스크립트입니다.
아래소스를 바디에 넣기만 하면 됩니다.

<script language="JavaScript">

function get_IEscroll(choice) {
if (document.all) {
document.body.scroll = choice;
}
}
//-->
</script>

<body onLoad="get_IEscroll('no')">

스크립트 안써도 되는데..태그하나만 추가하면..??
2007.03.20 18:56 신고

 이전  1   다음 

fotowall :: ncloud RSS Feeds today : 10   yesterday : 9
total : 185,543