【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.
どうでもよすぎるのですが、タイトルをつけた際に 悲しい時〜悲しい時〜 っていうスーツのお笑い芸人を思い出しました。
タイトルの通り、ただidを付けてページ内リンクを設定しているのに、Safariで別ページから遷移してきた際に位置がずれるという不思議な事案が発生ました。
以下のjsに書き換えた所、なおったのでメモしておきます(スルスル〜とスクロールされながらリンクの箇所へジャンプできます)。
|
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 |
var headerHeight = $('.site-header').outerHeight(); var urlHash = location.hash; if(urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ var target = $(urlHash); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); }, 100); } $('a[href^="#"]').click(function() { var href= $(this).attr("href"); var target = $(href); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); }); var _window = $(window), _header = $('.site-header'), heroBottom, startPos, winScrollTop; _window.on('scroll',function(){ winScrollTop = $(this).scrollTop(); heroBottom = $('.hero').height(); if (winScrollTop >= startPos) { if(winScrollTop >= heroBottom){ _header.addClass('hide'); } } else { _header.removeClass('hide'); } startPos = winScrollTop; }); _window.trigger('scroll'); |
Web Trends Lab.編集部
KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。
