Question

我在这里遇到问题。当用户点击“阅读更多”按钮时，会出现更多内容，但会将用户带到页面顶部，以查看用户必须再次访问该页面的更多内容。

我们可以避免这种情况吗？

这是我的代码

controller: class {
    constructor($http, Restangular, $state) {
        Object.assign(this, {$http, Restangular, $state});
    }
    doMe() {
       // use this.$http, this.Restangular & this.$state freely here
    }
}

任何帮助

Answer 1

您正在使用链接中的href='#'，禁用其默认行为（将跳转到＃存在的位置，在这种情况下为顶部。

应用return false;或e.preventDefault()

<a href="#" onclick="show('example1'); return false;">

带有大h1的工作堆栈代码来说明解决方案：

＆＃13;

function show(ele){
     document.getElementById(ele).style.display = 'block';   
}

＆＃13;

h1 {
  height: 500px;
  background-color: #F00;
}

＆＃13;

<h1>Example text</h1>
<p >example content.</p><a href="#" onclick="show('example1'); return false;"> Read more </a>
<p id="example1" style="display:none; font-weight: bold">more text will appear here.</p>

＆＃13;

Readmore按钮将用户带到页面顶部

1 个答案: