うさこ: 2017年7月アーカイブ

woff形式のwebフォントを使うとき。こんなかんじ。
（windows7では絵文字フォント当てないとデフォルトだと文字が足りなかった）
　
@font-face {
font-family: "EmojiFontName";
src: url('EmojiFontName-Regular.woff') format('woff');

}
p.emoji {
font-family: "EmojiFontName";
}

ネットで検索してみると、?id=とかをつけて......というのが多かったけど、普通の#でもいけるよね......？
というか、普通アンカーリンクって#でつけるから、#じゃないと使い勝手が悪い。
　
ヘッダ固定部分が120pxあるとした時に、リンク先のページに下記のコードを仕込んでおけばジャンプ後にヘッダ分動いてくれます。
　
$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("#") != -1){
var anchor = url.split("#");
var target = $('#' + anchor[anchor.length - 1]);
if(target.length){
var pos = Math.floor(target.offset().top) - 120;
$("html, body").animate({scrollTop:pos}, 500);
}
}
});