Smooth scrolling through the pages of the site?

Y

Yana N2018-03-22 12:03:05

JavaScript

Yana N, 2018-03-22 12:03:05

using script for smooth scrolling
$("nav a.nav-link").click(function () {
// saved id from href attribute
var id = $(this).attr('href');
var top = 0;
// if it's not #
if (id != '#') {
// find out the position of the desired block in relation to the upper left corner of the page
top = $(id).offset().top;
}
// scroll the page to the desired point
$('html, body').animate({scrollTop: top}, 500);
// cancel the default action (following the link)
return false;
});
menu structure (part):
https://jsfiddle.net/woq9v7wp/
when clicking on a link, it follows the anchor from any page,
error in console:
jquery-3.3.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: /o-kompanii/#about
at Function.oe.error (jquery-3.3.1.min.js:2)
at oe.tokenize(jquery-3.3.1.min.js:2)
at oe.select(jquery-3.3.1.min.js:2)
at Function.oe [as find](jquery-3.3.1.min .js:2)
at w.fn.init.find(jquery-3.3.1.min.js:2)
at new w.fn.init(jquery-3.3.1.min.js:2)
at w(jquery -3.3.1.min.js:2)
at HTMLAnchorElement. (common.min.js:1)
at HTMLAnchorElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLAnchorElement.y.handle (jquery-3.3.1.min.js:2)
what could be the reason ? selector is wrong?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

ink, 2018-03-22
@YanaLins2018

The answer was simple, but I still need to look for a solution, since I don’t know how to disable the standard behavior of links and that the transition would work, but I share the solution that
1 page is available to me :

index.html

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  topicstarter</title>
  <style> 
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
}
ul{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  position: fixed;
  -webkit-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  top:0;
  background:lightblue;
  width:100%;
  height:40px;
}
li{
  margin-left:10px;
  list-style:none;
}
a{
  font-size:1.4em;
  text-decoration:none;
}
.item{
  width:100vw;
  height:500px;
  margin-top:40px;
  padding-top:60px;
}
#item1{
background:red;  
}
#item2{
background:green;  
}
#item3{
background:blue;  
}
a:hover{
  color:yellow;
}
</style>
</head>

<body>
  <ul>
  <li><a href="page.html#section3">другая страница секция 3</a></li>
  <li><a href="#item1">секция 1 на этой странице</a></li>
  <li><a href="#item2">секция 2 на этой странице</a></li>
  <li><a href="#item3">секция 3 на этой странице</a></li>
</ul>

<div id="item1" class="item">15</div>
<div id="item2" class="item">25</div>
<div id="item3" class="item">35</div>

   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script> 
    $(document).ready(function(){
      $("ul").on("click","a", function () {
        var id  = $(this).attr('href'),
          top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 500);
      });
    });

    var myHash = location.hash; 
    location.hash = ''; 
    if(myHash[1] != undefined){ 
        $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); 
    };
  </script>
</body>

</html>

2 page :

page.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style> 
    *{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
          box-sizing:border-box;
    }
    ul{
      display:flex;
      position: fixed;top:0;width:100%;height:50px;align-items: center;background:#fff;
    }
    li{
      margin-left:10px;
      list-style-type: none;
    }
    a{
      font-size:1.3em;
      text-decoration: none;
    }
    a:hover{
      color:red;
    }
    .item{
      width:100vw;
      height:500px;
    }
    #section1{
     background:red;
    }
    #section2{
     background:green;
    }
    #section3{
     background:blue;  	
    }
  </style>

</head>
<body>
    <ul>
  <li><a href="index.html#item1">index.html item1</a></li>
  <li><a href="#section1">секция 1 на этой странице</a></li>
  <li><a href="#section2">секция 2 на этой странице</a></li>
  <li><a href="#section3">секция 3 на этой странице</a></li>
</ul>
  <div id="section1" class="item">
    Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Подпоясал на берегу своих предупреждал страна злых напоивший свое живет, жаренные всеми оксмокс. Единственное не свое коварных вскоре, залетают толку даже запятой семантика за, раз текстов щеке взобравшись своих языкового всеми там наш города? Жизни предложения деревни жаренные над ты, напоивший!
  </div>
  <div id="section2" class="item">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quos nam dicta iusto, odio quidem, ad culpa ullam nemo odit vitae soluta facere aut optio ipsam maiores fuga aliquam accusantium autem, obcaecati perferendis quae rerum laudantium, molestias nesciunt? Voluptates, quisquam minima, voluptas laborum aperiam nam! Impedit, nam laboriosam facere amet!
  </div>
  <div id="section3" class="item">
    Mujer uno dolor más de, poder mismo si. Paria modo permacultura amanecer repugnante dolor alma triste preferencia almácigo décima belleza ataque namibia laudo culpa encefalograma marejada analfabeto, falda pan. Accesorio débito casi sed demonio yugo, modo, propósito! Natividad triste dulce, menos fugacidad números, y apéndice décima lejos abogada, alma asunción.
  </div>




   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script> 
    $(document).ready(function(){
      $("ul").on("click","a", function () {
        var id  = $(this).attr('href'),
          top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 500);
      });
    });

    var myHash = location.hash; 
    location.hash = ''; 
    if(myHash[1] != undefined){ 
        $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); 
    };
  </script>

</body>
</html>

preview: lensky-preview.github.io/scroll/