質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Q&A

0回答

1086閲覧

別ページからのアンカーリンクをした時に一瞬表示されるが一番上にスクロールされてしまう。

mugi_tw

総合スコア0

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

0グッド

0クリップ

投稿2021/09/03 08:20

前提・実現したいこと

別ページからのアンカーリンクをした時に素直に表示されるようにしたい。

発生している問題・エラーメッセージ

別ページからリンクをクリックした際に一瞬表示したい箇所は表示されるがすぐに一番上にスクロールされてしまいます。

該当のソースコード

js

1/* ========= 2 * --------- */ 3 4(function($) { 5 6 "use strict"; 7 8 var cfg = { 9 defAnimation : "fadeInUp", 10 scrollDuration : 800, 11 mailChimpURL : 'http://facebook.us8.list-manage.com/subscribe/post?u=cdb7b577e41181934ed6a6a44&amp;id=e65110b38d' 12 }, 13 14 $WIN = $(window); 15 16 var doc = document.documentElement; 17 doc.setAttribute('data-useragent', navigator.userAgent); 18 /* Preloader 19 * ----------------- */ 20 var ssPreloader = function() { 21 22 $WIN.on('load', function() { 23 $('html, body').animate({ scrollTop: 0 }, 'normal'); 24 25 // will first fade out the loading animation 26 $("#loader").fadeOut("slow", function(){ 27 $("#preloader").delay(300).fadeOut("slow"); 28 }); 29 }); 30 }; 31 /* FitVids 32 --------------------- */ 33 var ssFitVids = function() { 34 $(".fluid-video-wrapper").fitVids(); 35 }; 36 /* Masonry 37 --------------------- */ 38 var ssMasonryFolio = function() { 39 40 var containerBricks = $('.bricks-wrapper'); 41 42 containerBricks.imagesLoaded( function() { 43 containerBricks.masonry( { 44 itemSelector: '.brick', 45 resize: true 46 }); 47 }); 48 }; 49 /* Light Gallery 50 ------------------------------------------------------- */ 51 var ssLightGallery = function() { 52 53 $('#folio-wrap').lightGallery({ 54 showThumbByDefault: false, 55 hash: false, 56 selector: ".item-wrap" 57 }); 58 }; 59 /* Flexslider 60 * --------------------- */ 61 var ssFlexSlider = function() { 62 63 $WIN.on('load', function() { 64 65 $('#testimonial-slider').flexslider({ 66 namespace: "flex-", 67 controlsContainer: "", 68 animation: 'slide', 69 controlNav: true, 70 directionNav: false, 71 smoothHeight: true, 72 slideshowSpeed: 7000, 73 animationSpeed: 600, 74 randomize: false, 75 touch: true, 76 }); 77 78 }); 79 80 }; 81 /* Carousel 82 * --------------------- */ 83 var ssOwlCarousel = function() { 84 85 $(".owl-carousel").owlCarousel({ 86 nav: false, 87 loop: true, 88 margin: 50, 89 responsiveClass:true, 90 responsive: { 91 0:{ 92 items:2, 93 margin: 20 94 }, 95 400:{ 96 items:3, 97 margin: 30 98 }, 99 600:{ 100 items:4, 101 margin: 40 102 }, 103 1000:{ 104 items:6 105 } 106 } 107 }); 108 109 }; 110 /* Menu on Scrolldown 111 * --------------------- */ 112 var ssMenuOnScrolldown = function() { 113 114 var menuTrigger = $('#header-menu-trigger'); 115 116 $WIN.on('scroll', function() { 117 118 if ($WIN.scrollTop() > 150) { 119 menuTrigger.addClass('opaque'); 120 } 121 else { 122 menuTrigger.removeClass('opaque'); 123 } 124 125 }); 126 }; 127 /* OffCanvas Menu 128 * --------------------- */ 129 var ssOffCanvas = function() { 130 131 var menuTrigger = $('#header-menu-trigger'), 132 nav = $('#menu-nav-wrap'), 133 closeButton = nav.find('.close-button'), 134 siteBody = $('body'), 135 mainContents = $('section, footer'); 136 137 menuTrigger.on('click', function(e){ 138 e.preventDefault(); 139 menuTrigger.toggleClass('is-clicked'); 140 siteBody.toggleClass('menu-is-open'); 141 }); 142 143 closeButton.on('click', function(e){ 144 e.preventDefault(); 145 menuTrigger.trigger('click'); 146 }); 147 148 siteBody.on('click', function(e){ 149 if( !$(e.target).is('#menu-nav-wrap, #header-menu-trigger, #header-menu-trigger span') ) { 150 menuTrigger.removeClass('is-clicked'); 151 siteBody.removeClass('menu-is-open'); 152 } 153 }); 154 155 }; 156 /* Smooth Scrolling 157 * --------------------- */ 158 var ssSmoothScroll = function() { 159 160 $('.smoothscroll').on('click', function (e) { 161 var target = this.hash, 162 $target = $(target); 163 164 e.preventDefault(); 165 e.stopPropagation(); 166 167 $('html, body').stop().animate({ 168 'scrollTop': $target.offset().top 169 }, cfg.scrollDuration, 'swing').promise().done(function () { 170 171 if ($('body').hasClass('menu-is-open')) { 172 $('#header-menu-trigger').trigger('click'); 173 } 174 175 window.location.hash = target; 176 }); 177 }); 178 179 }; 180 /* Placeholder Plugin Settings 181 * --------------------- */ 182 var ssPlaceholder = function() { 183 $('input, textarea, select').placeholder(); 184 }; 185 /* Alert Boxes 186 --------------------- */ 187 var ssAlertBoxes = function() { 188 189 $('.alert-box').on('click', '.close', function() { 190 $(this).parent().fadeOut(500); 191 }); 192 193 }; 194 /* Animations 195 * --------------------- */ 196 var ssAnimations = function() { 197 198 if (!$("html").hasClass('no-cssanimations')) { 199 $('.animate-this').waypoint({ 200 handler: function(direction) { 201 202 var defAnimationEfx = cfg.defAnimation; 203 204 if ( direction === 'down' && !$(this.element).hasClass('animated')) { 205 $(this.element).addClass('item-animate'); 206 207 setTimeout(function() { 208 $('body .animate-this.item-animate').each(function(ctr) { 209 var el = $(this), 210 animationEfx = el.data('animate') || null; 211 212 if (!animationEfx) { 213 animationEfx = defAnimationEfx; 214 } 215 216 setTimeout( function () { 217 el.addClass(animationEfx + ' animated'); 218 el.removeClass('item-animate'); 219 }, ctr * 30); 220 221 }); 222 }, 100); 223 } 224 225 this.destroy(); 226 }, 227 offset: '95%' 228 }); 229 } 230 231 }; 232 /* Intro Animation 233 * --------------------- */ 234 var ssIntroAnimation = function() { 235 236 $WIN.on('load', function() { 237 238 if (!$("html").hasClass('no-cssanimations')) { 239 setTimeout(function(){ 240 $('.animate-intro').each(function(ctr) { 241 var el = $(this), 242 animationEfx = el.data('animate') || null; 243 244 if (!animationEfx) { 245 animationEfx = cfg.defAnimation; 246 } 247 248 setTimeout( function () { 249 el.addClass(animationEfx + ' animated'); 250 }, ctr * 300); 251 }); 252 }, 100); 253 } 254 }); 255 256 }; 257 /* Contact Form 258 * --------------------- */ 259 var ssContactForm = function() { 260 261 /* local validation */ 262 $('#contactForm').validate({ 263 264 /* submit via ajax */ 265 submitHandler: function(form) { 266 var sLoader = $('#submit-loader'); 267 268 $.ajax({ 269 type: "POST", 270 url: "inc/sendEmail.php", 271 data: $(form).serialize(), 272 273 beforeSend: function() { 274 sLoader.fadeIn(); 275 }, 276 success: function(msg) { 277 if (msg == 'OK') { 278 sLoader.fadeOut(); 279 $('#message-warning').hide(); 280 $('#contactForm').fadeOut(); 281 $('#message-success').fadeIn(); 282 } 283 else { 284 sLoader.fadeOut(); 285 $('#message-warning').html(msg); 286 $('#message-warning').fadeIn(); 287 } 288 }, 289 error: function() { 290 sLoader.fadeOut(); 291 $('#message-warning').html("Something went wrong. Please try again."); 292 $('#message-warning').fadeIn(); 293 } 294 }); 295 } 296 297 }); 298 }; 299 /* AjaxChimp 300 * --------------------- */ 301 var ssAjaxChimp = function() { 302 303 $('#mc-form').ajaxChimp({ 304 language: 'es', 305 url: cfg.mailChimpURL 306 }); 307 308 $.ajaxChimp.translations.es = { 309 'submit': 'Submitting...', 310 0: '<i class="fa fa-check"></i> We have sent you a confirmation email', 311 1: '<i class="fa fa-warning"></i> You must enter a valid e-mail address.', 312 2: '<i class="fa fa-warning"></i> E-mail address is not valid.', 313 3: '<i class="fa fa-warning"></i> E-mail address is not valid.', 314 4: '<i class="fa fa-warning"></i> E-mail address is not valid.', 315 5: '<i class="fa fa-warning"></i> E-mail address is not valid.' 316 } 317 318 }; 319 320 321 /* Back to Top 322 * --------------------- */ 323 var ssBackToTop = function() { 324 325 var pxShow = 500, 326 fadeInTime = 400, 327 fadeOutTime = 400, 328 scrollSpeed = 300, 329 goTopButton = $("#go-top") 330 331 $(window).on('scroll', function() { 332 if ($(window).scrollTop() >= pxShow) { 333 goTopButton.fadeIn(fadeInTime); 334 } else { 335 goTopButton.fadeOut(fadeOutTime); 336 } 337 }); 338 }; 339 340 341 /* Initialize 342 * --------------------- */ 343 (function ssInit() { 344 345 ssPreloader(); 346 ssFitVids(); 347 ssMasonryFolio(); 348 ssLightGallery(); 349 ssFlexSlider(); 350 ssOwlCarousel(); 351 ssMenuOnScrolldown(); 352 ssOffCanvas(); 353 ssSmoothScroll(); 354 ssPlaceholder(); 355 ssAlertBoxes(); 356 ssAnimations(); 357 ssIntroAnimation(); 358 ssContactForm(); 359 ssAjaxChimp(); 360 ssBackToTop(); 361 362 })(); 363 364 365})(jQuery);

試したこと

ここに問題に対して試したことを記載してください。
当方jsに関しては殆ど知識がありません。
htmlの記述はできます。
ウェブサイトを作ろうと思っている中でテンプレートを編集している時に起きたことなのですがご教授いただけると幸いです。
よろしくお願い致します。
jsファイル内のコード記述を調べたものに変更したりなどしましたが全く効果はありませんでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2021/09/03 08:24

たぶんjavaは関係なくて、javascriptとjQueryなのでタグは付け直したほうがいいです
mugi_tw

2021/09/03 09:27

コメントありがとうございます。 タグ付けをどう直せばいいのでしょうか? 初心者なもので質問ばかりですみません。 ご教授頂けたら嬉しいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問