How to make website go to another part of it (Like another website) using javascript (Make new code-CodePudding

I have a website project, I created buttons such as "About Me" "Other" when clicked it should lead the user to another part of the website that looks different but still be in the same website sort of like I would "display: none" and hide the rest of the content onclick of a button and let new code fill the page.

CodePudding user response：

If I am getting your question correct, and you want the link to be the exact same but load different content inside the page, you may want to use jquery and the load function to change a div on your page. Normally though, for navigating to those types of pages, you would just change the page as they should be placed in the same domain (www.yourdomain.com\aboutme.html, www.yourdomain.com\other.html).

The pages need to be on the same domain for this to work, which is why I just have some js files showing in the snippet.

function load(link){
$('#contentarea').load(link);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js')">Load Jquery Script Text</button>
<button onclick="load('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js')">Load Flower</button>

<div id="contentarea">
</div>

CodePudding user response：

I don't fully understand your question, but I think what you want is that when the user clicks a button, the browser scrolls to a chapter of the webpage.

You don't even need JavaScript or jQuery for this, just create an anchor tag. with the href attribute referring to the id of the div or section (This works for any tag, not only div and section), assuming that the id is "aboutMe", you will be adding this:

<a href="#aboutMe">About Me</a>

And the div or section would be:

<div id="aboutMe">
   ...
</div>

The browser will scroll automatically so the viewport is displaying the section. You can also make it smooth by:

html {
   scroll-behavior: smooth;
}

You may also add scroll padding just so if your navbar is too big, it doesn't show over the text.

html {
   scroll-behavior: smooth;
   scroll-padding: 70px;
}

I hope this is what you are looking for.