A styled anchor name tag picture

Question

i found this kinda styled anchor name in this website http://maplestory.nexon.net/

can anyone know how to do this? What is that called?

enter image description here

See the previous question http://stackoverflow.com/questions/1638895/how-do-i-make-a-div-move-up-and-down-while-scrolling-the-page — Nisam, Mar 15 '14 at 05:55

score 1 · Accepted Answer · answered Mar 15 '14 at 06:07

This is a sample code, try like this

html

<div id="mydiv"></div>
<a href="#" id="backtotop" ></a>
<div id="mydiv1"></div>

script

$(window).scroll(function(){
 $('#backtotop').stop().animate({ top: $(window).scrollTop()+100 }, 500);
});

css

#mydiv
{

background-color:red;
height:1000px;
width:300px;
}

#backtotop {
z-index: 81;

    position: absolute;
    left: 300px;
    width: 64px;
    height: 93px;
background: url(http://nxcache.nexon.net/maplestory/img/bg/bg-backtotop.png) 0 0 no-repeat;
}

and here is the demo, DEmo

score 1 · Answer 2 · answered Mar 15 '14 at 06:26

One more example of such feature implementation:

var $toTop = $('#to-top').click(function() {
    $('body').animate({
        scrollTop: 0
    });
});

$(window).scroll(function() {
    $toTop.toggle($(window).scrollTop() > 100);
})
.trigger('scroll');

Demo: http://jsfiddle.net/d5czx/

score 0 · Answer 3 · answered Mar 15 '14 at 05:49

0

its css try this code

{    
    z-index: 81;
    display: none;
    position: absolute;
    right: -53px;
    width: 64px;
    height: 93px;
    background: url('Image URL') no-repeat scroll 0px 0px transparent;
}

answered Mar 15 '14 at 05:49

m-farhan

1,436
13
14

score 0 · Answer 4 · answered Mar 15 '14 at 06:00

0

I think not just css is being used, for the style and position yes but for the scrolling, probably done with jquery

answered Mar 15 '14 at 06:00

watkins

1

A styled anchor name tag picture

4 Answers4

Demo: http://jsfiddle.net/d5czx/