class clash on button style element
We have a Button that is styled like this:
<a class="mini pink button">Arrange Viewing</a>
And we also use scroll to, which if it was applied to a href link would look like this.
<a href="#myAnchor" rel="" id="anchor1" class="anchorLink">Arrange Viewing</a>
The issue I have is I want the mini pink button to on click scroll to content, but I cannot have 2 classes on same object.
css for the button is:
a.button {
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
font-weight: bold;
line-height: 1;
padding: 9px 34px;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
.mini.button {
font-size: 14px;
padding: 6px 8px;
}
.pink, .pinkaswell {
background: none repeat scroll 0 0 #EC008C;
}
js for the scroll to:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destin开发者_运维问答ation}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
FIDDLE here http://jsfiddle.net/VtxnK/
You can have two classes on an object, you just can't have two class attributes. Just add the class name on to the end of the other classes.
<a href="#myAnchor" rel="" id="anchor1" class="mini pink button anchorLink">
Arrange Viewing
</a>
Or, since you have an id, you can access it by the id...
$( "#anchor1" ).anchorAnimate();
精彩评论