CODEWITHSUNDEEP
javascripthtmlcss
Desinneh
Desinneh

Reputation: 23

I'm coding a page that scrolls down when a link is clicked. It appears blue after clicked

So I am coding a website that has a homepage which has a span that allows you to click it and then scroll down to a new section, the scroll works, and scrolls down but if I manually scroll back up the text appears blue and underlined. Is there any way to stop this from happening. 

    <a class="Scroll" href="#section02"><span></span>Scroll</a>

This is the HTML I have used and the new sections has an ID of section02.

$(function() {
$('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: 
$($(this).attr('href')).offset().top}, 500, 'linear');
    });
});

This is the JS used.

.Scroll {
position: absolute;
height: 20px;
z-index: 20;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

.Scroll::after{
position: absolute;
height: 20px;
z-index: 20;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

.Scroll:hover {
    opacity: .5;
    color: #fff;
    text-decoration: none;
}

This is the CSS I have used as I thought it may have been as I had no styling after the link is clicked but the problem still occurs, although the hover style still works when the scroll is blue.

What the scroll link looks like before.

And what it looks like after being pressed and manually scrolling up.

Any help is apprecitated

Upvotes: 0

Views: 58

Answers (3)

user7906058
user7906058

Reputation:

Try this:

.Scroll a, a:hover, a:visited, a:link, a:active {
    color: #FFFFFF;
    text-decoration: none;
}

The text-decoration: none; should do the trick and remove the underline. If it still doesn't work add !important after text-decoration like this: text-decoration: none !important;

Upvotes: 1

Paul
Paul

Reputation: 33

Set your css to

a:visited { text-decoration: none; color: white; }

You can change the color to whatever color you want. The text-decoration none will remove the underline.

Upvotes: 0

SpaceDogCS
SpaceDogCS

Reputation: 2968

Try this, the code for changing the color and removing the text-decoration has to be directly in the a tag

a{
    text-decoration: none;
    color: inherit;
}

Upvotes: 0

Related Questions