What is the best way to implement anchor links within elements located within md-content?

After transitioning to Angular material for a project, I encountered an issue with the navbar (now a toolbar) buttons that were meant to scroll to different sections on the page.

To achieve the desired toolbar shrink effect and reappear on scroll up, I had to place the content within a md-content component right after the toolbar. However, this change resulted in breaking all anchor links functionality...

I have been unable to find a solution to this problem so far. The anchor links only function properly when the scrollable element is set as the body, but this causes me to lose the shrink effect, ripple effect, and results in an odd sidenav appearance...

Below are snippets of the relevant code:

CSS:

body{
  overflow-y: hidden;
}
#main-content{
  height: 100vh;
}

HTML:

<md-toolbar md-scroll-shrink>
  (...)
  <md-button href="#leave-email">Click</md-button>
</md-toolbar>
<md-content id="main-content">
  (...)
  <md-button href="#leave-email">Click</md-button>
  (lots of content)
  <section id="leave-email">(...)</section>
</md-content>

None of the above buttons are functioning correctly. Previously, I utilized Angular smooth scroll for a smoother scroll experience, but I removed it while attempting to resolve this issue.

htmlcssanchorangular-material

Answer №1

For certain elements, the HREF attribute may not be applicable to use. In such cases, you can utilize the onClick method instead. Take, for example, a button which does not have the HREF attribute:

<button onClick="location.href = 'http://google.co.uk/';"></button>

One thing to note is that when implementing this method, the cursor will default to its default state. To simulate the behavior of an A tag's HREF attribute, you can include the following: 

onMouseOver="this.style.cursor = 'pointer';"
and 
onMouseOut="this.style.cursor = 'default';"

Take a look at this example below:

<button onMouseOver="this.style.cursor = 'pointer';" onMouseOut="this.style.cursor = 'default';" onclick="location.href = 'http://google.co.uk/';">Click Here</button>

I hope this explanation proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customize the text displayed on the select box button in a React application

My task involves working with an array of JSON objects structured like this - [ { "country_code": "AF", "country_name": "Afghanistan", "country_flag": " ...

javascripthtmlreactjsselectdrop-down-menu

Eliminate extra space beside the dark column on the right side in Bootstrap 4

For some time now, I've been struggling with an issue related to the left sidebar. When the sidebar is absent, the white space on the right disappears. I've tried various suggestions from others but none seem to solve the problem. I'm unsure ...

htmlcssbootstrap-4navbarnav

Can Masonry.js content be perfectly centered?

I am currently experimenting with creating a layout consisting of one to four variable columns per page using the Masonry plugin. I have been impressed with how it functions so far. However, there is an aggravating gap that persists despite my best effort ...

javascriptcssmasonry

Is it possible to toggle between hide and show functions using Jquery?

I have a question about two jquery functions that I've been struggling with. $(document).ready(init); function init() { $(".alphaleft").hover(function (g) { $(".boxy,.yee").show(); }, function (g) { $(".boxy,.yee").hide(); }); } ...

javascriptjquerycss

Display multiple videos next to and below one another in a responsive layout

I am attempting to display multiple Vimeo videos responsively alongside and below each other. I have noticed that when using the embed-responsive feature, the videos may not align perfectly if different videos are used. However, they align perfectly when t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Incorporating an image into the <option> element in Django

Hey there, I have a question for you all. Is it possible to add a specific image to each option in Django? <select id="sTypes2" name="current_tier" class="form-control input-lg c-square"> <option value="Silver I">Silver I</opt ...

pythondjangohtml

What is the method to modify the color of the final letter within an element?

Is it possible to make the last letter of a word appear red using CSS? <asp:Label ID="QuestionText" runat="server" CssClass="asterisk"></asp:Label> .asterisk:after { color: Red; content: " *"; } The challenge arises from the fact tha ...

csspseudo-element

What is the best way to embed an HTML tag along with its attributes as a string within an element?

https://i.sstatic.net/EZSOX.png Is there a way to incorporate this specific HTML tag with its distinct colors into an element within a JSX environment? I attempted the following approach: const htmlTag = '<ifx-icon icon="calendar-16"> ...

javascripthtmlcssjsx

What is the best way to show an item in a list automatically when the cursor hovers over it?

Is it possible to display the options in a drop-down list without clicking on the menu? I have created a drop-down list using the "option" within the "select" tag, but I want the options to be visible without having to click. How can this be achieved? & ...

phphtmlmysqlcss

What is the reason behind RGB employing 6 hexadecimal digits?

RGB coding involves using two hex digits to represent the Red, Green, and Blue components of a color. For example, #ff0000 represents pure red. Each hex digit signifies a value from 0-15, or 4 bits of data. However, why do we use 32 bits to encode every ...

csscolorsrgbinformation-theory

The chosen index in the Material Stepper feature is experiencing a malfunction

I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this: Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define [selected ...

javascriptangulartypescriptangular-material

Creating a blog "post" model in Ruby on Rails with CSS that can behave in two distinct ways

I am in the process of creating a blog using Ruby on Rails. The posts on my blog are generated from the Posts model, and I want them to exhibit two different behaviors. Currently, I have configured it so that a new post is automatically created every day. ...

cssruby-on-rails

Troubleshooting: PHP Integration Issue with HTML Document

I have a simple HTML file displaying text and including a PHP file with basic echos: The HTML code is in 'home.html' file: <html> <body> <h1>Welcome to my home page!</h1> <p>Some text.</p> <p>Some more ...

phphtmlcssxampp

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

javascripthtmljquerycss

Learn the method of setting the 'was-validated' class on a form in order to display validation feedback messages dynamically using Angular 5 following form submission

I have set up a template-based form in Angular that utilizes Bootstrap (v4) for styling. My goal is to display validation messages upon form submission. Here is an example of my form: <form [ngClass]="{'was-validated': wasValidated}"> & ...

cssangularvalidationbootstrap-4angular5

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

HTML {% load static %} <link rel="stylesheet" type="text/css" href="{% static 'lessons/style.css' %}" /> <script> function openNav() { document.getElementById("mySidenav").style.width = "20%"; document.getElementById("main" ...

javascripthtmlcssdjangofor-loop

Tips for automatically setting focus to the following cell after inserting a new row in AngularJS

Transitioning from the Knockout world to Angular, I am facing an issue with a key-press event for tab. Whenever I add a new row in the table, the focus shifts to the information icon in the URI bar instead of the next cell in the newly created row. I belie ...

javascriptangularjshtml

The mat-card's content is too large for the mat-card container

I am currently working on a project using Angular 7, Material, and Flex-layout. I am facing a challenge in making the mat-card with a mat-card-image responsive. The mat-card-image is a square picture with a maximum width and height of 160px. This is the ...

cssangularangular-materialangular-flex-layout

Experiencing difficulties with coding on the website and aligning an image in the center

I'm encountering issues with the code below. <tbody> <tr align="center"> <td> <p align="right"><font face="Arial, Helvetica, sans-serif"><strong>Processors</strong> <img src="images/IntelPentium4.jpg" alig ...

htmlcss

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity