jump page hyperlink not working.

Question

I'm using hyperlinks to jump the page as well as shift page on my webpage.

I'm having difficulty getting my hyperlinks to work. I can't figure out why.

I use the following code to shift page

<a href="secondpage.html">secondpage</a>

and the following code to jump page

<a href="#!">jumppagedownwards</a>

(further down the page)

<a href="!"></a>

---

How do I combine my jumppage and my shift page in one hyperlink?

I tried the followingcode:

<a href="secondpage.html#!">secondpagefurtherdown</a>

For some reason it was working on some links and others it only shift page without jumping.

Is there a better way to write the link?

Answer 1

Anchors and basic html usage:

.first-content{
  height:400px;
  width:400px;
  background-color:grey;
}
.second-content{
  height:400px;
  width:400px;
  background-color:green;
}
div{
margin-bottom:100px;
}

<div class="first-content">
  <a href="#second" name="first">go to second content</a>
</div>
<div class="second-content">
  <a href="#first" name="second">go to first content</a>
</div>

If you want to use advanced smooth scoll, you can see this document

https://css-tricks.com/snippets/jquery/smooth-scrolling/

And you can visit 50 Best Smooth Scroll jQuery Plugins Of 2017

Answer 2

You should try somethink like this: <a href="http://www.mylink.html">link</a> (external url) or <a href="./mylink.html">link</a> (local)