The site has a fixed menu that overlaps some of the content, scrolling works fine, but how to adjust to -100px here's the script -

  $("#contactyGo").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("#contacty")).offset().top + "px" }, { duration: 500, easing: "swing" }); return false; });

I tried to write - 100 before "px" - did not help. Help noob please.

  • change location #contacty - or move the anchor itself to css, look in css this is user33274
  • It is possible as an option, but in the blocks there are no sections as high as necessary, I would finish something but there will be at least 5 menu items and definitely have to crutch something, I thought there is some solution in terms of dividing the script itself, I am jquery I’ve been studying for a long time, but I think that this problem should be solved in a different way, without modifying the template, but I didn’t find anything similar on the reference, where to look? - Taras Potochilov

1 answer 1

  1. The .attr() function returns the attribute value if the attribute name is specified. Your code should return an error, check the console. In the meantime, the error in the code works, most likely, a normal link.

  2. Before .animate add .stop() . It will come in handy when there are several such buttons on the page and the user starts pressing them without waiting for the scrolling to end.

  3. jQuery runs wordpress in noConflict mode , so wrap your code in

 jQuery(document).ready(function($) { });
  1. You can move the anchor without a script by placing a large padding-top and a negative margin-top . But you already have a script, so it’s better to finalize it:

 jQuery(document).ready(function($) { $("#contactyGo").click(function() { $("html, body").stop().animate({ scrollTop: $($(this).attr('href')).offset().top - 100 }, { duration: 500, easing: "swing" }); return false; }); }); 
 <a id="contactyGo" href="#contacty">Ссылка</a> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <h2 id="contacty">Контакты</h2> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <p>Абзац.</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  • As for the css, the option works, but the problem is that the block to which it is scrolling and the block above it have different colors and the option with padding-top and margin-top makes it so that the content from the top block climbs to the bottom one does not look very nice honestly, and about the script it doesn't work and everything, maybe it's nonsense of course, but I inserted it into the slider code in the template, a wordpress site, if that, I certainly don't think the error is there, and the scrolling works smoothly, can there be any crap in the fact that the script lies with the slider script on jquery? The script inserted your. - Taras Potochilov
  • @ Taras Potochilov Console swears at something? Show the link to the site. - Gleb Kemarsky
  • do not laugh at shovanka.com.ua)) I’m doing the second night, I connected the anchor to the contacts in the menu - Taras Potochilov
  • @ Taras Potochilov I do not see the code with scrolling to the contacts on click. Neither in custom.js , nor in hook-custom-script.js . Where to find it? Or check how it was connected. - Gleb Kemarsky
  • script put here shovanka.com.ua/www/wp-content/themes/skt-white/js/ jquery.nivo.slider.js - Taras Potochilov