The problem is as follows. The site implements smooth anchor links via https://github.com/cferdinandi/smooth-scroll I am an amateur in javascript and jQuery, so could you please tell me how you can implement this not through hash or how to remove " "?

  • one
    And what prevents # in the links? - Vadizar
  • imgur.com/a/gvhTq I just want it to be implemented without a grid, like on all sites. - Alexander Demchenko

2 answers 2

Made a minimalist example on jQuery. The link through # records the id of the block to which you want to go, however, no hashes are added to the URL. Works for any link on the page in which the id of the block to go.

// Page a Link Smooth Scrolling $("[href^='#']").click(function() { var idtop = $($(this).attr("href")).offset().top; $('html,body').animate( // Time animation {scrollTop: idtop}, 500); return false; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> div{height:100vh} #block1{background: #000} #block1 a{color: #fff} </style> <div id="block1"> <a href="#block2">скролл ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ</a> </div> <div id="block2"> <a href="#block1">скролл ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌΡƒ Π±Π»ΠΎΠΊΡƒ</a> </div>

  • one
    $("[href^='#']").click(function() { - it would be more correct $("body").on('click', "[href^='#']", function() { . - Qwertiy ♦
  • Why? Argue. - Vadizar
  • @Qwertiy read this article first and find out that .on is already deprecated: api.jquery.com/category/deprecated - Vadizar
  • one
    I do not see in that article that on was declared deprecated. And did not notice that you used jQuery 3. Why is it better? Because it works with dynamically added links. And your option selects only existing at the time of sampling. - Qwertiy ♦
  • @Qwertiy campaign not read this article. Or are going to remove. Now I find and throw off. - Vadizar

This plugin is specially built in such a way as to handle the transition by clicks keeping them in history. If you just need a smooth transition, can it be easier to make it yourself? Here is a sample code, it is very simple:

 $('body').on('click', '.smooth-scroll-class', function(){ //ΠΏΠΎ href ΠΈΡ‰Π΅ΠΌ элСмСнт с Π½ΡƒΠΆΠ½Ρ‹ΠΌ id ΠΈ опрСдСляСм Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ pos = $( $(this).attr('href') ).offset(); if (pos) { //скролим Π½Π° эту ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ $("html, body").animate({scrollTop: pos.top}, 600); //ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ стандартный ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС return false; } })

So you can make a link not to <a name='hashlink'> a to <.. id='hashlink'> Those do not need to create anchors, just write the id desired element.

You can also search for an anchor.

 $('body').on('click', '.smooth-scroll-class', function(){ //ΠΏΠΎ href ΠΈΡ‰Π΅ΠΌ ΡΠΊΠΎΡ€ΡŒ с Π½ΡƒΠΆΠ½Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ pos = $('a[name=' + $(this).attr('href').replace(/^#/,'') + ']').offset(); if (pos) { //скролим Π½Π° эту ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ $("html, body").animate({scrollTop: pos.top}, 600); //ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ стандартный ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС return false; } })

Live test:

  $('body').on('click', '.smooth-scroll', function() { pos = $('a[name=' + $(this).attr('href').replace(/^#/,'') + ']').offset(); if (pos) { $("html, body").animate({ scrollTop: pos.top }, 600); return false; } }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#bottom" class='smooth-scroll'>скролл Π²Π½ΠΈΠ·</a> <div style="height:2000px"></div> <a name='bottom'></a>